Web Workers API

Web Workers 使得在独立于 Web 应用程序主执行线程的后台线程中运行脚本操作成为可能。这样做的好处是,繁重的处理可以在单独的线程中执行,从而使主(通常是 UI)线程能够运行而不被阻塞/减慢。

概念与用法

Worker 是使用构造函数(例如 Worker())创建的一个对象,它运行一个命名的 JavaScript 文件——该文件包含将在 worker 线程中运行的代码。

除了标准的 JavaScript 函数集(如 StringArrayObjectJSON 等)之外,您几乎可以在 worker 线程中运行任何您想要的。有一些例外:例如,您不能直接从 worker 内部操作 DOM,或使用 Window 对象的一些默认方法和属性。有关您可以运行的代码的信息,请参阅支持的函数支持的 Web API

数据通过消息系统在 worker 和主线程之间传递——双方都使用 postMessage() 方法发送消息,并通过 onmessage 事件处理程序响应消息(消息包含在 message 事件的 data 属性中)。数据是复制的,而不是共享的。

Worker 也可以产生新的 worker,只要这些 worker 与父页面托管在同一个 下。

此外,worker 可以使用 fetch()XMLHttpRequest API 发起网络请求(但请注意,XMLHttpRequestresponseXML 属性将始终为 null)。

Worker 类型

有几种不同类型的 worker。

  • 专用 worker 是由单个脚本使用的 worker。此上下文由 DedicatedWorkerGlobalScope 对象表示。
  • 共享 worker 是可以被不同窗口、IFrames 等中运行的多个脚本使用的 worker,只要它们与 worker 位于同一域。它们比专用 worker 稍微复杂一些——脚本必须通过活动端口进行通信。
  • Service Workers 本质上充当 Web 应用程序、浏览器和网络(可用时)之间的代理服务器。它们旨在实现诸如创建有效的离线体验、拦截网络请求并根据网络可用性采取适当措施、更新服务器上的资源等功能。它们还将允许访问推送通知和后台同步 API。

Worker 上下文

虽然 worker 不能直接访问 Window,但许多相同的方法定义在一个共享的 mixin (WindowOrWorkerGlobalScope) 中,并通过 worker 自己的 WorkerGlobalScope 派生上下文提供给 worker。

接口

Worker

表示一个正在运行的 worker 线程,允许您将消息传递给正在运行的 worker 代码。

WorkerLocation

定义了由 Worker 执行的脚本的绝对位置。

SharedWorker

表示一种特定的 worker,可以从多个 浏览上下文(即窗口、标签页或 iframe)甚至其他 worker 访问。

WorkerGlobalScope

表示任何 worker 的通用作用域(与普通 Web 内容的 Window 作用相同)。不同类型的 worker 拥有从该接口继承并添加更特定功能的范围对象。

DedicatedWorkerGlobalScope

表示专用 worker 的作用域,继承自 WorkerGlobalScope 并添加了一些专用功能。

SharedWorkerGlobalScope

表示共享 worker 的作用域,继承自 WorkerGlobalScope 并添加了一些专用功能。

WorkerNavigator

表示用户代理(客户端)的身份和状态。

示例

我们创建了几个演示来展示 Web Worker 的用法。

您可以在 使用 Web Workers 中找到有关这些演示如何工作的更多信息。

规范

规范
HTML
# worker

另见