Web Workers API
Web Workers 使得在独立于 Web 应用程序主执行线程的后台线程中运行脚本操作成为可能。这样做的好处是,繁重的处理可以在单独的线程中执行,从而使主(通常是 UI)线程能够运行而不被阻塞/减慢。
概念与用法
Worker 是使用构造函数(例如 Worker())创建的一个对象,它运行一个命名的 JavaScript 文件——该文件包含将在 worker 线程中运行的代码。
除了标准的 JavaScript 函数集(如 String、Array、Object、JSON 等)之外,您几乎可以在 worker 线程中运行任何您想要的。有一些例外:例如,您不能直接从 worker 内部操作 DOM,或使用 Window 对象的一些默认方法和属性。有关您可以运行的代码的信息,请参阅支持的函数和支持的 Web API。
数据通过消息系统在 worker 和主线程之间传递——双方都使用 postMessage() 方法发送消息,并通过 onmessage 事件处理程序响应消息(消息包含在 message 事件的 data 属性中)。数据是复制的,而不是共享的。
Worker 也可以产生新的 worker,只要这些 worker 与父页面托管在同一个 源下。
此外,worker 可以使用 fetch() 或 XMLHttpRequest API 发起网络请求(但请注意,XMLHttpRequest 的 responseXML 属性将始终为 null)。
Worker 类型
有几种不同类型的 worker。
- 专用 worker 是由单个脚本使用的 worker。此上下文由
DedicatedWorkerGlobalScope对象表示。 - 共享 worker 是可以被不同窗口、IFrames 等中运行的多个脚本使用的 worker,只要它们与 worker 位于同一域。它们比专用 worker 稍微复杂一些——脚本必须通过活动端口进行通信。
- Service Workers 本质上充当 Web 应用程序、浏览器和网络(可用时)之间的代理服务器。它们旨在实现诸如创建有效的离线体验、拦截网络请求并根据网络可用性采取适当措施、更新服务器上的资源等功能。它们还将允许访问推送通知和后台同步 API。
Worker 上下文
虽然 worker 不能直接访问 Window,但许多相同的方法定义在一个共享的 mixin (WindowOrWorkerGlobalScope) 中,并通过 worker 自己的 WorkerGlobalScope 派生上下文提供给 worker。
DedicatedWorkerGlobalScope用于专用 worker。SharedWorkerGlobalScope用于共享 worker。ServiceWorkerGlobalScope用于 service worker。
接口
Worker-
表示一个正在运行的 worker 线程,允许您将消息传递给正在运行的 worker 代码。
WorkerLocation-
定义了由
Worker执行的脚本的绝对位置。 -
表示一种特定的 worker,可以从多个 浏览上下文(即窗口、标签页或 iframe)甚至其他 worker 访问。
WorkerGlobalScope-
表示任何 worker 的通用作用域(与普通 Web 内容的
Window作用相同)。不同类型的 worker 拥有从该接口继承并添加更特定功能的范围对象。 DedicatedWorkerGlobalScope-
表示专用 worker 的作用域,继承自
WorkerGlobalScope并添加了一些专用功能。 -
表示共享 worker 的作用域,继承自
WorkerGlobalScope并添加了一些专用功能。 -
表示用户代理(客户端)的身份和状态。
示例
我们创建了几个演示来展示 Web Worker 的用法。
- 基本的专用 worker 示例(运行专用 worker)。
- 基本的共享 worker 示例(运行共享 worker)。
- OffscreenCanvas worker 示例(运行 OffscreenCanvas worker)。
您可以在 使用 Web Workers 中找到有关这些演示如何工作的更多信息。
规范
| 规范 |
|---|
| HTML # worker |