为什么以下两段代码的运行方式如此不同？

Question

看这两段代码，第二段只加了第三行。但是时间是84倍。谁能解释一下为什么？

let LIMIT = 9999999;
let arr = new Array(LIMIT);
// arr.push(1);
console.time('Array insertion time');
for (let i = 1; i < LIMIT; i++) {
  arr[i] = i;
}
console.timeEnd('Array insertion time');

let LIMIT = 9999999;
let arr = new Array(LIMIT);
arr.push(1);
console.time('Array insertion time');
for (let i = 1; i < LIMIT; i++) {
  arr[i] = i;
}
console.timeEnd('Array insertion time');

Answer 1

arr.push(1) 操作创建一个“稀疏”数组：它在索引9999999 处有一个元素。 V8 将这种稀疏数组的内部表示切换为“字典模式”，即数组的后备存储是索引→元素字典，因为这比仅使用其中一个时为 1000 万个元素分配空间要显着提高内存效率。

另一方面，字典模式数组的访问（读取或写入）元素比“快速/密集模式”中的数组要慢：每次访问都必须计算正确的字典索引，并且（在场景中手）字典必须增长几次，这意味着将所有现有元素复制到新的后备存储中。

随着阵列被填满，V8 注意到它变得越来越密集，并在某个时候将其转换回“快速/密集模式”。到那时，已经观察到大部分放缓。循环的其余部分也增加了一些成本，因为此时，arr[i] = i; 存储已经看到了两种类型的数组（字典模式和密集模式），所以在每次迭代时，它必须检测数组处于哪个状态现在并相应地处理它，这（不足为奇）比不必做出决定要花费更多的时间。

概括的结论：由于 JavaScript 如此动态和灵活，引擎对于看起来非常相似的代码片段的行为可能会完全不同；例如，因为引擎优化了一种情况下的内存消耗和另一种情况下的执行速度，或者因为其中一种情况允许它使用一些不适用于另一种情况的快捷方式（无论出于何种原因）。好消息是，在许多情况下，正确且易于理解/直观/简单的代码也往往运行良好（在此示例中，流浪的 arr.push 看起来很像一个错误）。