javascript - 为什么数组字面量和 BufferArray 的性能差距这么大？

Question

我尝试了解 js 中的 ArrayBuffer，因为它是线程和工作线程之间的可传输类型之一。

我发现变量创建存在巨大的性能差距，并且我无法在互联网上找到答案。

我尝试了几次基准测试，数组字面量的声明速度总是比 TypedArray 快得多。我在node 11、chrome和firefox中尝试过，结果是一致的。

var LIMIT = 10000;
console.time("Array insertion time");
for (var i = 0; i < LIMIT; i++) {
    var arr = new Array();
}
console.timeEnd("Array insertion time");


console.time("ArrayBuffer insertion time");
for (var i = 0; i < LIMIT; i++) {
  var buffer = new ArrayBuffer(LIMIT * 4);
  var arr = new Int32Array(buffer);
}
console.timeEnd("ArrayBuffer insertion time");

我收到了疯狂的结果:
数组插入时间:1.283ms
ArrayBuffer 插入时间:53.979ms

我认为 JS 引擎声明 TypedArray 比声明垃圾更快。我认为 ArrayBuffer 是一个非常优化的为程序分配内存的调用。

Answer 1

你们根本就没有做同样的事情......

当你声明一个ArrayBuffer时，浏览器会请求一个静态内存槽，即这个ArrayBuffer的大小。
另一方面，数组没有静态内存槽，它会被重新分配，同时其长度也会更新。

因此，如果您想执行公平的测试，那么您需要在这些数组中分配一些数据，因为目前，它们对于引擎而言只是空对象，即它们的占用空间非常低，并且生成速度非常快。

var LIMIT = 5000; // I have to lower the LIMIT because Array is so slow
console.time("Array insertion time");
for (var i = 0; i < LIMIT; i++) {
  // to be fair, they should hold the same data
  var arr = new Array(LIMIT * 4).fill(0);
}
console.timeEnd("Array insertion time");


console.time("ArrayBuffer insertion time");
for (var i = 0; i < LIMIT; i++) {
  var buffer = new ArrayBuffer(LIMIT * 4);
  var arr = new Int32Array(buffer);
}
console.timeEnd("ArrayBuffer insertion time");