在全局空間中運行代碼與在Javascript中的函數中運行代碼的性能

Question

如果我在Chrome的控制台中運行此代碼：

console.time('object');
var arr = Object.keys([].concat(Array(1000001).join().split(''))).map(Math.random)
console.timeEnd('object');

console.time('loop while');
var arr = [];
var i = 1000000;
while(i--){
  arr.push(Math.random());
}
console.timeEnd('loop while');

console.time('loop for');
var arr = [];
for(var i = 0; i < 1000000; i++){
  arr.push(Math.random());
}
console.timeEnd('loop for');

我得到這些結果：

object:      820.718ms
loop while: 1542.202ms
loop for:   1775.736ms

但是，如果我在以下函數中運行它：

!function arrayOfRandoms() {
  console.time('object');
  var arr = Object.keys([].concat(Array(1000001).join().split(''))).map(Math.random)
  console.timeEnd('object');

  console.time('loop while');
  var arr = [];
  var i = 1000000;
  while(i--){
    arr.push(Math.random());
  }
  console.timeEnd('loop while');

  console.time('loop for');
  var arr = [];
  for(var i = 0; i < 1000000; i++){
    arr.push(Math.random());
  }
  console.timeEnd('loop for');  
}()

我得到了完全不同的結果：

object:     846.752ms (about the same)
loop while: 418.416ms (about 4x faster)
loop for:   398.790ms (about 4x faster)

似乎該函數觸發某種VM魔術來優化代碼並運行它幾乎快4倍。 如果我自己運行arrayOfRandoms函數幾次，結果會變得更好：

object:     550.601ms (2x)
loop while: 175.694ms (8x)
loop for:   187.462ms (9x)

瀏覽器優化代碼編寫在函數內部比編寫在全局范圍內的代碼更好嗎？ （或者我搞砸了console.time :)？

Answer 1

全局命名空間是一個對象，從那里獲取價值JS編譯器做這樣的事情：

globals.findValueByKey("arr");

每次它需要訪問全局arr 。

雖然獲取局部變量的值正是“通過已知索引獲取數組的元素”：

const ARR_VARIABLE_CELL_IDX = 2; // const computed at compile time.

locals[ARR_VARIABLE_CELL_IDX];

您可以想象，按索引訪問速度更快。