javascript - 吸引数组中不存在的元素，大大降低了性能

Question

做了一个观察——吸引数组中不存在的元素，会大大降低性能。它明显在长循环中。为什么会这样？

例子:

var filledArray = []; //This array will filled
var emptyArray = [];  //This array leave empty

//fill one array
for(var i = 0; i < 1e6; i++) {
    filledArray[i] = true;
}

//Just iterate the array and call its elements
//In filled array all elements exists, in empty array non-exists
function callItems(arr) {
    for(var i = 0; i < 1e6; i++) {
        arr[i];
    }
}

//measurement function
function bench(f, d) {
    var start = new Date;
    f(d);
    alert(new Date - start, ' ms');
}

////Result for filled array
//Firefox 24.0:             20 ms
//Chrome 30.0:              3  ms
bench(callItems, filledArray);

////Result for empty array
//Firefox 24.0:             340 ms
//Chrome 30.0:              70  ms
bench(callItems, emptyArray);

编辑:
如果您在 Firefox 中运行代码，请注意 Firefox 的结果会影响 Firebug – 启用或禁用它。经过各种测试，我明白了。
如果它启用——结果相同，我在上面是如何写的。但是如果在启动 Firefox 后没有启用 Firebug – 时间等于 2ms(比 Opera 和 Chrome 快)并且空/填充数组之间的差异消失。
还影响结果交换调用函数 bench() – 首先是空数组，然后是填充数组(仅在启用 Firebug 的 Firefox 中，没有 Firebug 和在其他浏览器中结果不变)。

为什么会影响 Firebug？ – 附加问题。

Answer 1

这很可能是因为 JavaScript 引擎正在为空数组中的元素 0 到 i 分配空间。当数组被填满时，JS 引擎简单地访问元素并返回它的值。在空的情况下，引擎准备在数组中的那个位置设置一个值，这需要为该元素分配空间。

在打开任务管理器的情况下在 Chrome 30 中运行您的示例代码我观察到在第二步(遍历空数组)期间页面的内存使用量激增了 10k。当引擎意识到该空间未被使用时，此空间很快被释放。