处理大型数组时的 JavaScript 性能

Question

我目前正在用 JavaScript 编写图像编辑程序。我选择 JS 是因为我想了解更多关于它的知识。我处理的平均图像约为 3000 x 4000 像素大。当转换为 imageData(用于编辑像素)时，我必须处理的值加起来高达 48000000 个。这就是为什么我决定引入网络 worker 并让他们只编辑数组的第 n 部分。假设我有 10 个 webworker，每个 worker 将不得不处理 4800000 个值。为了能够使用网络 worker ，我将大数组划分为我选择的线程数量。我使用的代码片段如下所示:

while(pixelArray.length > 0){
    cD.pixelsSliced.push(pixelArray.splice(0, chunks)); //Chop off a chunk from the picture array
}

稍后，在工作人员对数组进行了一些操作后，他们将其保存到另一个数组中。每个 worker 都有一个 ID 并将他的部分保存在提到的数组中他的 id 的位置(以确保数组保持正确的顺序)。我使用 $.map 将该数组(看起来像 [[1231][123213123][213123123]] 连接成一个大数组 [231231231413431]，稍后我将从中创建我需要的图像数据。它看起来像这样:

cD.newPixels = jQuery.map(pixelsnew, function(n){
    return n;
});

创建此数组 (cD.pixelsSliced) 后，我创建 imageData 并将此图像复制到 imageData-Object 中，如下所示:

cD.imageData = cD.context.createImageData(cD.width, cD.height);
for(var i = 0; i < cD.imageData.data.length; i +=4){ //Build imageData
    cD.imageData.data[i + eD.offset["r"]] = cD.newPixels[i + eD.offset["r"]];
    cD.imageData.data[i + eD.offset["g"]] = cD.newPixels[i + eD.offset["g"]];
    cD.imageData.data[i + eD.offset["b"]] = cD.newPixels[i + eD.offset["b"]];
    cD.imageData.data[i + eD.offset["a"]] = cD.newPixels[i + eD.offset["a"]];
}

现在我确实意识到我在这里处理大量数据，我可能不应该使用浏览器进行图像编辑，而是使用不同的语言(我在 uni 中使用 Java)。但是我想知道您是否有关于性能的任何提示，因为坦率地说，当我第一次尝试大图像时，我感到非常惊讶。我没有想到，加载图像需要“那么”长的时间(代码的第一个和平)。 Firefox 实际上认为我的脚本坏了。代码的其他两部分是我发现会减慢脚本速度的代码(这是正常的)。所以是的，如果有任何提示，我将不胜感激。

谢谢

Answer 1

我建议在使用 Web Worker 时研究可传输对象而不是结构化克隆。 Web Workers 通常使用结构化克隆来传递对象，换句话说就是制作一个副本。对于大图像等大型对象，这可能会占用大量时间。

当使用 Transferable Objects 时，数据从一个上下文传输到另一个上下文。换句话说，零拷贝，这应该会提高向 Worker 发送数据的性能。

更多信息请查看: http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects

此外，另一个想法可能是将拆分和对接大型数组的任务移交给网络 worker 。只是在这里集思广益，但是，也许你可以先产生一个 Web Worker，我们称它为 Mother Worker。这个 worker 可以拆分阵列，然后生成 10 个执行繁重任务的其他 child worker 并送回他们的母亲。

妈妈终于把它们全部放回原处并发送回主应用程序。