SharedWorker
SharedWorker 接口代表一种特殊的 worker，可以被多个浏览上下文（例如多个窗口、iframe 甚至 worker）访问。它们实现的接口与专用 worker 不同，并且拥有不同的全局作用域：SharedWorkerGlobalScope。
注意： 如果 SharedWorker 可以被多个浏览上下文访问，那么所有这些浏览上下文必须共享完全相同的源（相同的协议、主机和端口）。
构造函数
-
创建一个共享 Web Worker，它会执行指定 URL 的脚本。
实例属性
继承其父级 EventTarget 的属性。
-
返回一个
MessagePort对象，用于与共享 worker 通信和控制它。
事件
error-
当共享 worker 中发生错误时触发。
实例方法
继承其父级 EventTarget 的方法。
示例
在我们 简单的共享 worker 示例（运行共享 worker）中，我们有两个 HTML 页面，每个页面都使用一些 JavaScript 来执行简单的计算。不同的脚本使用相同的 worker 文件来执行计算——即使它们的页面运行在不同的窗口中，它们都可以访问它。
下面的代码片段展示了使用 SharedWorker() 构造函数创建 SharedWorker 对象。两个脚本都包含这个
const myWorker = new SharedWorker("worker.js");
注意： 一旦创建了共享 worker，同一源中的任何脚本都可以获得对该 worker 的引用并与之通信。只要共享 worker 的全局作用域所有者集合（一组 Document 和 WorkerGlobalScope 对象）不为空（例如，如果存在任何持有对其引用的活动页面，可能是通过 new SharedWorker()），该共享 worker 就会一直存在。有关共享 worker 生命周期的更多信息，请参阅 HTML 规范的 worker 的生命周期部分。
然后，两个脚本都通过使用 SharedWorker.port 属性创建的 MessagePort 对象来访问 worker。如果使用 addEventListener 附加了 onmessage 事件，则通过其 start() 方法手动启动 port。
myWorker.port.start();
当 port 启动后，两个脚本分别使用 port.postMessage() 和 port.onmessage 向 worker 发送消息并处理从 worker 发送来的消息。
注意： 您可以使用浏览器开发者工具来调试您的 SharedWorker，方法是在浏览器的地址栏输入 URL 来访问开发者工具的 worker 检查器；例如，在 Chrome 中，URL 是 chrome://inspect/#workers，在 Firefox 中，URL 是 about:debugging#workers。
[first, second].forEach((input) => {
input.onchange = () => {
myWorker.port.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
});
myWorker.port.onmessage = (e) => {
result1.textContent = e.data;
console.log("Message received from worker");
};
在 worker 内部，我们使用 onconnect 处理程序来连接到上面讨论的同一个 port。与该 worker 关联的 port 在 connect 事件的 ports 属性中可用——然后我们使用 MessagePort 的 start() 方法来启动 port，并使用 onmessage 处理程序来处理从主线程发送的消息。
onconnect = (e) => {
const port = e.ports[0];
port.addEventListener("message", (e) => {
const workerResult = `Result: ${e.data[0] * e.data[1]}`;
port.postMessage(workerResult);
});
port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
规范
| 规范 |
|---|
| HTML # shared-workers-and-the-sharedworker-interface |
浏览器兼容性
加载中…