SharedWorker

https://juejin.cn/post/6844904198639714311#heading-29 https://juejin.cn/post/7139718200177983524#heading-1

SharedWorker 是一种特殊类型的 Worker，它可以被多个浏览上下文访问，比如多个 windows，iframes 和 workers，这些浏览上下文必须同源，它们实现于一个不同于普通 worker 的接口，具有不同的全局作用域：SharedWorkerGlobalScope ，但是继承自WorkerGlobalScope

SharedWorker 线程的创建和使用跟 worker 类似，事件和方法也基本一样。 不同点在于，主线程与 SharedWorker 线程是通过MessagePort建立起链接，数据通讯方法都挂载在SharedWorker.port上。

如果你采用 addEventListener 来接收 message 事件，那么在主线程初始化SharedWorker() 后，还要调用 SharedWorker.port.start() 方法来手动开启端口。

main.js（主线程）

const sharedWorker = new SharedWorker("./sharedWorker.js");

sharedWorker.port.start(); // 开启端口

sharedWorker.port.addEventListener("message", (msg) => {
  console.log(msg.data);
});

但是，如果采用 onmessage 方法，则默认开启端口，不需要再手动调用SharedWorker.port.start()方法

main.js（主线程）

const sharedWorker = new SharedWorker("./sharedWorker.js");

sharedWorker.port.onmessage = (msg) => {
  console.log(msg.data);
};

由于 SharedWorker 是被多个页面共同使用，除了与各个页面之间的数据通讯是独立的，同一个SharedWorker 线程上下文中的其他资源都是共享的。基于这一点，很容易实现不同页面之间的数据通讯。

sharedWorker 调试

在 sharedWorker 线程里使用 console 打印信息，不会出现在主线程的的控制台中。如果你想调试 sharedWorker，需要在 Chrome 浏览器输入 chrome://inspect ，这里能看到所有正在运行的 sharedWorker，然后开启一个独立的 dev-tool 面板。