Question

在我的网站上，我有很多数据阵列。例如：顶点数组，颜色数组，大小数组......

我正在处理大量物品。高达数千万。

在将数据添加到数组之前，我需要处理它。到现在为止，我在主线程中做到了这一点，这让我的网站冻结了X秒。它因处理而冻结，并且因为将处理后的数据添加到数组中。

今天我感动了＃39; （做了很多工作）处理成Web工作者，但处理后的数据正在主线程中添加。我设法节省了处理的冻结时间，但没有增加。

添加只需array.push()或array.splice()即可完成。

我已经阅读了一些关于数组如何工作的文章，并且发现当我们将项添加到数组时，数组被完全复制到内存中具有array.length + 1大小的新位置并且添加了价值。这使我的数据推迟。

我还读到了类型化数组要快得多。但为此，我需要知道数组的大小，我不知道，并且创建一个带有额外计数器的大类型数组，并管理在中间（而不是数组末尾）添加项目是很多代码更改，我现在不想做。

所以，对于我的问题，我有从Web工作者返回的TypedArray，我需要将其放入常规数组中。什么是最好的方法来做到这一点？（今天我在一个循环中跑步并一个接一个地推动）

修改

网站如何运作的示例：客户端添加项目数，比方说100000。正在收集项目原始数据并将其发送给工作人员。工作人员正在处理所有信息并将处理后的数据作为类型数组发回（用作可转移对象）。在主线程中，我们将处理后的数据添加到数组 - 最后或某些特定索引中。第二轮。客户端添加另外100000个项目。发送给worker并将结果添加到主线程数组中。第3轮可以是10项，第4轮10000，第5轮可以删除指数10-2000，...

Answer 1

是否有更多的研究使用了这些评论并考虑了另一个方向。

我尝试过使用typedArray.set方法并发现它非常快。

使用套装的1000万件物品需要0.004秒，相比之下array.push 0.866秒。我将10百万个数据分成10个数组，以确保从索引0开始时set方法的工作速度不快。

这种方式我认为我甚至可以使用TypedArray实现我自己的insertAtIndex，它会向前推送所有项目并在正确的索引中设置新的项目。

此外，我可以使用TypedArray.subArray根据数组中的实际数据量（不复制数据）获取子数据 - 用于将数据上传到缓冲区（WebGL）< / p>

我说我想使用常规阵列，但这种性能提升我认为我不会有其他明智之处。当我将MyNewTypedArray作为TypedArray包装所有push，splice，自己的实现时，并没有那么多工作。

希望此信息可以帮助任何人

var maxCount = 10000000;
var a = new Float32Array(maxCount);
var aSimple = [];

var arrays = [];
var div = 10;
var arrayLen = maxCount / div;
for (var arraysIdx = 0; arraysIdx < div; arraysIdx++) {
  var b = new Float32Array(arrayLen);
  for (var i = 0; i < b.length; i++) {
    b[i] = i * (arraysIdx + 1);
  }
  arrays.push(b);
}

var timeBefore = new Date().getTime();

for (var currArrayIdx = 0; currArrayIdx < arrays.length; currArrayIdx++) {
  a.set(arrays[currArrayIdx], currArrayIdx * arrayLen);
}
var timeAfter = new Date().getTime();
good.innerHTML = (timeAfter - timeBefore) / 1000 + " sec.\n";
timeBefore = new Date().getTime();
for (var currArrayIdx = 0; currArrayIdx < arrays.length; currArrayIdx++) {
  for (var i = 0; i < arrayLen; i++) {
    aSimple.push(arrays[currArrayIdx][i]);
  }
}

timeAfter = new Date().getTime();
bad.innerHTML = (timeAfter - timeBefore) / 1000 + " sec.\n";

Using set of TypedArray:
<div id='good' style='background-color:lightGreen'>working...</div>
Using push of Array:
<div id='bad' style='background-color:red'>working...</div>

将项目推送到数组中的最佳性能方式？

1 个答案: