Web Worker 文件是如何加载的？

Question

我想在加载后立即向网络工作者发出一些东西。代码如下：

var w = new Worker("worker.js");
w.onmessage = function (ev) {
    console.log(ev.data);
};
w.postMessage("Hello World");

在worker.js 我有：

this.onmessage = function (ev) {
    self.postMessage(ev.data);
}

所以，事件流程是这样的：

窗口 --Hello World-> web worker -- Hello World -> 窗口 -> console.log(ev.data)

我的问题是为什么会这样？这意味着worker.js 文件是同步加载的。对吗？

我什至尝试在 web worker 中加载其他文件：

importScripts('foo.js');
importScripts('bar.js');

即使加载这些文件也能正常工作。为什么？从底层的角度来看，Web Worker 文件是如何加载的？

Answer 1

new Worker("worker.js") 不会“网络阻塞”调用线程（“主线程”）。 new 调用返回独立于工作人员的状态。 worker 可能尚未完成执行其脚本、加载其脚本，甚至将自身初始化为可以开始/命令加载其脚本的状态。

您的关注onmessage 设置在主线程中，独立于工作状态。这也不会阻塞。

postMessage() 调用将为工作人员排队一条消息，而无需等待其取件。此时主线程执行完毕（“跌入谷底”），其事件循环将等待事件。

worker 独立于主线程运行（嗯……这就是创建 worker 的重点）。它将首先运行其工作脚本。现在我想不出任何办法让它（暂时）产生执行，这意味着整个工作脚本需要“跌入谷底”，即在工作人员的单个事件循环获得控制权之前完成执行（再次） .

只有这样，来自主线程的消息才会在运行工作线程的事件循环时被 Javascript 接收。您的工作人员的onmessage() 函数将被调用，该函数将消息排队到主线程。甚至在 worker 的 postMessage() 完成之前，主线程可能已经接收到该消息。 （当然，如果工人空闲，这也可能发生在相反的情况下。）

worker中的中间importScripts()是同步的，阻塞worker，而不是主线程。

同步阻塞importScripts() 的替代方法是具有new Worker('worker.js', {type: 'module'}) 的模块工作者。那些将importScripts() 替换为异步import() 或同步import。到目前为止，很少有浏览器支持这一点。 Blink 可以，但是对于 Opera，我不知道如果没有 import in worker，它如何支持 module worker。

（更多请尝试module worker article。）