javascript - 为什么 Web Worker 版本运行时间更长？

Question

我正在尝试使用两种不同的变体(没有网络工作人员和使用网络工作人员)来汇总数字。

我预计 Web Workers 版本的速度会快十倍左右，因为我将间隔分为十个间隔，但事实并非如此。大约慢了十倍。我不懂为什么。十个网络 worker 是否并行工作？

var sum1 = 0, sum2 = 0, nrElements = 10000000;

var t0 = performance.now();
for (var i=0; i < nrElements; i++) {
    sum1 += i;
}
var t1 = performance.now();
console.log("Version1 - " + (t1 - t0) + " sum: " + sum1)

var t3 = performance.now();
var n, running;
var pas = 0;
running = 0;
for (n = 0; n < 10; ++n) {
    let workers = new Worker("worker.js");
    pozStart = pas;
    pas += nrElements / 10;
    pozStop = pas;
    workers.postMessage({start: pozStart, stop: pozStop});
    workers.onmessage = workerDone;
    ++running;
}
function workerDone(e) {
    --running;
    sum2 += e.data[1];
    if (running === 0) { 
        var t4 = performance.now();
        console.log("Version2 - " + (t4 - t3) + " sum: " + sum2)
    }
}

//worker.js
onmessage = function(e) {
    var sum=0;
    for(let i= e.data.start; i < e.data.stop; i++)
    {
        sum += i;
    }
    postMessage(["r",sum]);
}

Answer 1

这里有很多事情可能会让您的观察结果有很大差异，例如浏览器如何优化您的代码(特别是对于如此简单的 for 循环)，但要回答一般性问题为什么通过 Web-Workers 运行需要更多时间，然后...

• 您正在并行运行 10 个工作线程。如果您的计算机无法同时运行十个线程，那么所有线程确实都会变慢。
  根据经验，永远不要超过 navigator.hardwareConcurrency - 1 同一页面上的并发 Web Worker 数量。

• 初始化 WebWorker 并不是一个快速的操作。它包括网络请求、js文件的解析、上下文的构建。因此初始化一次，然后多次要求他们做你想做的事。

但请注意，即使如此，使用 Workers 进行如此小的操作，结果可能会较慢。操作简单

 worker.postMessage(); // in main
 self.onmessage = e => self.postMessage(); // in worker.js
 worker.onmessage = e => ... // back in main

将已经在至少 3 个不同的事件循环中发生，因为消息是在发送消息之后的事件循环中接收的。 除非您有一些需要几秒钟的操作，否则工作负载的卸载确实可能会变慢。

但即使速度较慢，在 Worker 中卸载工作也可以让主线程获得空闲，而这 30 毫秒将导致丢掉两帧，这可能会使动画之类的东西看起来很不稳定，所以继续使用 WebWorkers，但是不是为了速度。