javascript - 使 Javascript 线程变得更快

Question

最近我一直在尝试使用 Web Workers 界面来试验 JavaScript 中的线程。

尝试使用网络 worker 创建包含，请按照以下步骤操作:

• 将初始数组拆分为大小相等的部分
• 为每个片段创建一个 Web Worker，并在该片段上运行 .contains
• 当在任何片段中找到该值时，它会返回 true，而无需等待所有工作线程完成。

这是我尝试过的:

var MAX_VALUE = 100000000;
var integerArray = Array.from({length: 40000000}, () => Math.floor(Math.random() * MAX_VALUE));

var t0 = performance.now();
console.log(integerArray.includes(1));
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");

var promises = [];
var chunks = [];
while(integerArray.length) {
    chunks.push(integerArray.splice(0,10000000));
}

t0 = performance.now();
chunks.forEach(function(element) {
    promises.push(createWorker(element));
});

function createWorker(arrayChunk) {
    return new Promise(function(resolve) {
        var v = new Worker(getScriptPath(function(){
            self.addEventListener('message', function(e) {
                var value = e.data.includes(1);
                self.postMessage(value);
            }, false);
        }));
        v.postMessage(arrayChunk);
        v.onmessage = function(event){
            resolve(event.data);
        };
    });
}

firstTrue(promises).then(function(data) {
    // `data` has the results, compute the final solution
    var t1 = performance.now();
    console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
});

function firstTrue(promises) {
    const newPromises = promises.map(p => new Promise(
        (resolve, reject) => p.then(v => v && resolve(true), reject)
));
   newPromises.push(Promise.all(promises).then(() => false));
    return Promise.race(newPromises);
}

//As a worker normally take another JavaScript file to execute we convert the function in an URL: http://stackoverflow.com/a/16799132/2576706
function getScriptPath(foo){ return window.URL.createObjectURL(new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]],{type:'text/javascript'})); }

任何尝试过的浏览器和CPU，与仅对初始数组执行简单的包含相比，它都非常慢。

为什么这么慢？ 上面的代码有什么问题？

引用文献

• Waiting for several workers to finish
• Wait for the first true returned by promises

编辑:问题与 .contains() 具体无关，但可能是其他数组函数，例如.indexOf()、.map()、forEach() 等。为什么在 Web Worker 之间分配工作需要更长的时间......

Answer 1

这是一个有点人为的示例，因此很难帮助优化您想要具体执行的操作，但一个容易被忽视且可修复的缓慢路径是将数据复制到网络工作人员。如果可能，您可以使用 ArrayBuffers 和 SharedArrayBuffers 与 Web Worker 快速传输数据。

您可以使用 postMessage 函数的第二个参数将 arrayBuffer 的所有权转移给 Web Worker。需要注意的是，在 Web Worker 将缓冲区传回之前，主线程将无法再使用该缓冲区。 SharedArrayBuffers 没有这个限制，可以同时被许多工作人员读取，但由于安全问题，不一定在所有浏览器中都支持(请参阅 mdn for more details )

例如

const arr = new Float64Array(new ArrayBuffer(40000000 * 8));

console.time('posting');
ww.postMessage(arr, [ arr.buffer ]);
console.timeEnd('posting');

运行时大约需要 0.1 毫秒

const arr = new Array(40000000).fill(0);

console.time('posting');
ww.postMessage(arr, [ arr ]);
console.timeEnd('posting');

运行大约需要 10000 毫秒。这只是为了传输消息中的数据，而不是运行工作逻辑本身。

您可以阅读有关 postMessage TransferList 参数的更多信息 here和可转移类型here 。需要注意的是，您的示例进行计时比较的方式也包括 Web Worker 创建时间，但希望这可以更好地了解大量时间的去向以及如何更好地解决它。