数组调整大小性能，设置长度属性与重复推送

Question

所以我对以下代码进行了基准测试，试图找出哪个性能更高：

'use strict';

function addSetToArrayA(array, set) {
  for (const v of set) {
    array.push(v);
  }
}
function addSetToArrayB(array, set) {
  const origLength = array.length;
  const newLength = array.length + set.size;
  array.length = newLength;
  array[newLength - 1] = 0;
  let i = origLength;
  for (const v of set) {
    array[i++] = v;
  }
}

const set = new Set([1, 2, 3, 4, 5, 6]);

console.time('addSetToArrayA');
for (let i = 0;i<0xffffff;++i) {
  const base = [1, 2, 3, 4, 5, 6];
  addSetToArrayA(base, set);
}
console.timeEnd('addSetToArrayA');

console.time('addSetToArrayB');
for (let i = 0;i<0xffffff;++i) {
  const base = [1, 2, 3, 4, 5, 6];
  addSetToArrayB(base, set);
}
console.timeEnd('addSetToArrayB');

结果让我有点吃惊：

addSetToArrayA: 728.773ms
addSetToArrayB: 3296.437ms

所以我又做了一个基准测试：

'use strict';

const iters = 0xfffff;

console.time('32 push');
for (let i = 0;i<iters;++i) {
  const base = [1, 2, 3, 4, 5, 6];
  for (let k = 0;k<32;++k) {
    base.push(undefined);
  }
}
console.timeEnd('32 push');

console.time('32 length');
for (let i = 0;i<iters;++i) {
  const base = [1, 2, 3, 4, 5, 6];
  base.length = 32;
}
console.timeEnd('32 length');

console.time('64 push');
for (let i = 0;i<iters;++i) {
  const base = [1, 2, 3, 4, 5, 6];
  for (let k = 0;k<64;++k) {
    base.push(undefined);
  }
}
console.timeEnd('64 push');

console.time('64 length');
for (let i = 0;i<iters;++i) {
  const base = [1, 2, 3, 4, 5, 6];
  base.length = 64;
}
console.timeEnd('64 length');

console.time('128 push');
for (let i = 0;i<iters;++i) {
  const base = [1, 2, 3, 4, 5, 6];
  for (let k = 0;k<128;++k) {
    base.push(undefined);
  }
}
console.timeEnd('128 push');

console.time('128 length');
for (let i = 0;i<iters;++i) {
  const base = [1, 2, 3, 4, 5, 6];
  base.length = 128;
}
console.timeEnd('128 length');

结果与我之前的经历一致：

32 push: 132.061ms
32 length: 180.745ms
64 push: 284.575ms
64 length: 212.465ms
128 push: 586.747ms
128 length: 268.689ms

例如。对于相对较小的数组，通过 .length 重新调整大小比重复使用 .push() 慢，而对于较大的数组，它更快（正如预期的那样）。

在使用.length = ... 和.push(...) 时，V8 是否执行不同类型的数组大小调整？ 这是否与 V8 处理稀疏数组的方式有关？

在 Node@10.12 上运行，在 chrome 中具有类似的结果。

Answer 1

V8 开发人员在这里。简短的回答是 .push() 是超级优化的，而写入 .length 是一个相当慢的操作（部分是因为 JavaScript 规范说它必须做的，部分是因为我们没有优化它——但即使我们这样做了，它也不会像 .push() 那样快一些元素）。

事实上，您会注意到写入.length 以缩短数组和调用.pop() 几次之间的相似区别。

我个人认为这不是一个糟糕的状态：基于.push 的代码简洁、直观且易读。基于.length 的替代方案看起来像是试图以使代码更丑陋和更复杂为代价来挤出一些额外的性能——not 有帮助不是很好吗？写你想写的代码，让引擎操心让它快！ :-)

在使用 .length = ... 与 .push(...) 时，V8 是否执行不同类型的数组大小调整？

写入.length 和调用.push(...) 是非常不同的操作（后者非常简单，前者必须执行一堆检查），所以是的，V8 在底层所做的必然是不同的。如果/一旦发生，调整大小本身是相同的。

这与 V8 处理稀疏数组的方式有关吗？

在你的例子中没有。一般来说，写入.length 必须检查数组是否应该转换到稀疏模式，但检查本身非常快。