javascript - WebWorkers 的执行似乎比主线程慢得多

Question

我一直致力于优化一些长时间运行的 JavaScript，并尝试实现 WebWorkers。

我有一组独立的任务要计算。在我的初始测试中，有 80 个任务，在主线程上用了 250 毫秒完成。我认为我可以将任务分配给一些网络 worker ，并将时间缩短到 50 毫秒左右。

我的数据是嵌套多个类型数组的几何数据结构。我有将所有数据提取到 JSON + ArrayBuffer 对象数组的方法，因此我可以将传输的数据传递给 WebWorker，而无需复制大数组。

• 我已经测试了数据传输，并确认它按预期工作。传输到 WebWorker 后，我的类型化数组在主线程中为空。
• 我(目前)预先启动了 4 个 Web Worker，以便在需要完成工作时，Worker 应该准备就绪。
• 当每个工作人员完成一项任务时，我将其放入队列中的下一个任务，直到队列为空。
• 我跟踪 web worker 的时间，看看有多少时间用于实际计算(例如，忽略数据传输开销)。
• 我有一台 8 核笔记本电脑，每天运行多线程代码。

这是我的 WebWorker 脚本。

importScripts('../lib/MyLib.js');

let timeComputing = 0;  
this.onmessage = function(e) {
  switch (e.data.msg) {
    case 'compute':
        let mesh = ... unpack data;
        let start = performance.now();
        mesh.doexpensiveCompute();
        timeComputing += performance.now() - start;
        ... send data back to the main thread.
        break;
    case 'logTime':
        console.log("timeComputing:" + timeComputing);
  }
}

当 worker 记录正在使用的时间时，通常每个 worker 大约 130 毫秒，这意味着总时间实际上将近 500 毫秒。主线程在 250 毫秒内完成所有工作，所以我使用 WebWorkers 的速度要慢 100%。出于某种原因，在 WebWorker 中运行完全相同的代码比在主线程中运行要慢得多。

我很快就会有一些工作负载可能有数百个任务，所以我希望 WebWorkers 能让我的页面保持响应。 (目前它根本不在大负载上)。

对于我为什么会看到如此糟糕的结果，有人能提出任何建议吗？注意:我在这里消除了数据传输成本(我认为这是最小的)和线程启动。我纯粹是在测量 worker 的计算时间，这很糟糕……有没有人有在 webworker 中运行繁重计算任务的经验？

一个想法是，我的工作脚本也会加载我的主引擎脚本。 (示例代码中的 MyLib.js)，这是一个 Webpacked 脚本，而且相当大。我使用它是为了希望浏览器缓存意味着它不需要再次请求它。也许我应该只为 webworker 上下文生成我的引擎的最小版本。

感谢任何提示...

Answer 1

我现在已经调试了我的 Worker。

importScripts('../lib/MyLib.js');

最初，我以为在 worker 中重新使用我的主库 js 文件将使浏览器能够使用缓存版本的库。 IE。浏览器不需要 HTTP 请求文件或编译它，因为它已经在内存中。事实证明这是错误的，浏览器需要重新请求文件并重新编译它。

因为我的脚本很大，重新编译成了一个很大的开销，因为它似乎还需要为每个线程重新编译它。我通过测量每项任务的往返时间得出这个结论，同时在 worker 中执行零工作。每个线程的往返时间开始时非常高 (300 毫秒)，并在几次迭代后迅速下降到 < 1 毫秒。

我现在使用内联网络 worker 来避免额外请求并保持我的库封装，如下所述:http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers并且还为工作人员使用一个简化的脚本到最低限度。

我现在的表现非常出色。 250 毫秒为 ~50 毫秒。第一次往返很慢，但还算不错，内联 web worker 使它快了很多。