共享工作线程

SharedWorker 接口表示一种特殊的 worker，可以从多个浏览上下文（例如多个窗口、iframe 甚至 worker）访问。它们实现的接口与专用 worker 不同，并且具有不同的全局范围，SharedWorkerGlobalScope。

注意：如果 SharedWorker 可以从多个浏览上下文访问，则所有这些浏览上下文必须共享完全相同的来源（相同的协议、主机和端口）。

构造函数

SharedWorker(): 创建一个共享 Web 工作线程，该工作线程执行指定 URL 上的脚本。

实例属性

继承自其父级 EventTarget 的属性。

SharedWorker.port 只读: 返回一个 MessagePort 对象，用于与共享工作线程通信和控制它。

示例

在我们的基本共享工作线程示例 (运行共享工作线程) 中，我们有两个 HTML 页面，每个页面都使用一些 JavaScript 执行简单的计算。不同的脚本使用相同的 worker 文件执行计算——它们都可以访问它，即使它们的页面在不同的窗口中运行。

以下代码片段显示了使用 SharedWorker() 构造函数创建 SharedWorker 对象。这两个脚本都包含此内容

const myWorker = new SharedWorker("worker.js");

注意：创建共享工作线程后，在同一来源中运行的任何脚本都可以获取对该工作线程的引用并与其通信。只要其全局范围的所有者集（一组 Document 和 WorkerGlobalScope 对象）不为空，共享工作线程就会保持活动状态（例如，如果任何活动页面持有对它的引用，可能是通过 new SharedWorker()）。若要详细了解共享工作线程的生命周期，请参阅 HTML 规范的工作线程的生命周期部分。

然后，这两个脚本都通过使用 SharedWorker.port 属性创建的 MessagePort 对象访问工作线程。如果使用 addEventListener 附加 onmessage 事件，则端口将使用其 start() 方法手动启动

myWorker.port.start();

端口启动后，这两个脚本都将消息发布到工作线程，并使用 port.postMessage() 和 port.onmessage 分别处理从工作线程发送的消息

注意：您可以使用浏览器开发者工具调试 SharedWorker，方法是在浏览器地址栏中输入 URL 以访问开发者工具工作线程检查器；例如，在 Chrome 中，URL 为 chrome://inspect/#workers，在 FireFox 中，URL 为 about:debugging#workers。

first.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.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");
};

在工作线程内部，我们使用 onconnect 处理程序连接到上面讨论的同一端口。与该工作线程关联的端口可在 connect 事件的 ports 属性中访问——然后我们使用 MessagePort 的 start() 方法启动端口，并使用 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 标准 # 共享工作线程和 SharedWorker 接口

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

Worker