javascript - 让 web workers 更快开始，没有延迟

Question

我正在尝试加速我与网络 worker 一起构建的 javascript 网站。这对我来说是全新的，我正在学习。

我设法让这个 web worker 运行并做它应该做的事情(即加载一些 CSV 数据，转换它并发回)。

但在我看来，这个网络 worker 开始他的工作有点太晚了(在我向他发送 postMessage 后大约 500 毫秒)

这正常吗？
为什么 worker 不早点开始？
我能做什么？

这是 worker :

self.postMessage('A. !!! Worker on');
self.onmessage = function(event) {
    var n=event.data;
    self.postMessage('['+n+'] B. Worker started');
    // (...)
}

这是 worker 的处理:

window.timer = Date.now();
window.timerTotal = window.timer;

function loadData(n){
    console.log('A. !!! Begin loadData function (dt=' + (Date.now()-window.timer) + ') (T='+(Date.now()-window.timerTotal)+')'); window.timer = Date.now();

    var worker = new Worker('my_task.js');
    worker.onmessage = function(event) {
        if ( (typeof event.data)==='string'){
            console.log('Web Worker: ' + event.data + ' (dt=' + (Date.now()-window.timer) + ') (T='+(Date.now()-window.timerTotal)+')'); window.timer = Date.now();
        }
        else if ( (typeof event.data)==='object'){
            console.log('!!! Web Worker returned object: (dt=' + (Date.now()-window.timer) + ') (T='+(Date.now()-window.timerTotal)+')'); window.timer = Date.now();
            createGraphs2(event.data);
        }
    };

    if(n===100){
        d3.csv("data/Movies100-V2.0.csv", function(error, data_csv) {
            createGraphs(data_csv);
        });
    }
    else if(n==='10k'){
        worker.postMessage(n);
    console.log('postMessage send to web worker (dt=' + (Date.now()-window.timer) + ') (T='+(Date.now()-window.timerTotal)+')'); window.timer = Date.now();
    }
}

loadData('10k');

// (...) lots of functions like createGraphs2(data)

这是日志:

Begin loadData function (dt=7) (T=7)
postMessage send to web worker (dt=1) (T=8)
Web Worker: A. !!! Worker on (dt=524) (T=591)
Web Worker: [10k] B. Worker started (dt=1) (T=593)

谢谢!

更新:

当我在启动 veryLongScript 的同时向工作人员发送 postMessage 时:

veryLongScript();
worker.postMessage(n);

大多数时候，worker 在 veryLongScript 之后响应。

(veryLongScript)
Web Worker: A. !!! Worker on (dt=301) (T=12464)
Web Worker: [10k] B. Worker started (dt=1) (T=12465)
Web Worker: [10k] C. dependencies loaded (dt=600) (T=13065)

有时工作人员会在 veryLongScript 之前和之后响应某些内容，但它似乎无法并行工作。

Web Worker: A. !!! Worker on (dt=1235) (T=1416)
Web Worker: [10k] B. Worker started (dt=0) (T=1418)
(veryLongScript)
Web Worker: [10k] C. dependencies loaded (dt=619) (T=13168)

Answer 1

当你创建一个新的 worker 时

new Worker('my_task.js');

只有在此时，浏览器才会向服务器发出请求，让 my_task.js 在 worker 中运行。然后，您将等待向您的服务器发出并返回的请求，以及正在启动的工作人员。

我在 http://plnkr.co/edit/MlabLs4HafnIscBbnPJv?p=preview 做了一个你的代码的缩减示例.对我来说，它报告启动 worker 的时间为 ~130ms for Chrome。然而，网络检查员指出获取脚本需要大约 90 毫秒。从而为worker的实际启动时间留出40ms。

我怀疑您报告的 500 毫秒中的大部分实际上是从服务器获取工作脚本所花费的时间。

我的建议是

• 在页面加载时创建工作器，而不仅仅是在您要使用它之前。 (尽管如果您已经在页面加载时使用它，那么您在这里无能为力)。参见 http://plnkr.co/edit/cNltJvTbLxDr2FfaCuRf?p=preview对我而言，一条消息从现有工作人员发送/返回的时间减少到 ~2 毫秒。

• 确保 Worker javascript 文件可由浏览器缓存，设置适当的 HTTP header 。因此，除了第一次访问外，都避免了网络请求。

• 如果带有工作器的页面通常不是访问者在您网站上看到的第一个页面，您可以稍微作弊并在其他页面上加载工作器，但不要使用它。如果脚本具有适当的缓存 header ，它将避免在实际需要它的页面上发出请求。

或者，您可以避免将 worker 作为单独的文件，而是将代码内联并将其转换为数据 URI，如 https://stackoverflow.com/a/6454685/1319998 中所述。 . 但是如https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers所述

There is currently disagreement among browsers vendors on what URIs are of the same-origin; Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) and later do allow data URIs and Internet Explorer 10 does not allow Blob URIs as a valid script for workers.

所以我会小心地在您想要支持的浏览器上进行测试。