文档阅读笔记

Appearance

Web Worker ​

Web Worker 使得在一个独立于 Web 应用程序主执行线程的后台线程中运行脚本操作成为可能。这样做的好处是可以在独立线程中执行费时的处理任务，使主线程（通常是 UI 线程）的运行不会被阻塞/放慢。

概念与用法 ​

Worker 是一个使用构造函数创建的对象 ( 例如 : Worker()),它运行一个具名 JavaScript 文件。这个文件包含将在 worker 线程中运行的代码。worker 线程不能访问主线程的 DOM 对象，但可以与主线程通信。

除了标准的 JavaScript 函数集( 如 String,Array,Object,JSON 等),你可以在 worker 县城中运行任何你喜欢的代码.但是有一些例外:

  • 不可以在 worker 线程中运行 DOM 函数。
  • 不能使用 window 对象中的某些方法和属性

关于可以运行的代码,可以参考下文中的 Worker全局上下文和函数 和 支持的 Web API

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

worker 可以一次生成新的worker,只要这些 worker 与父页面托管在一个 origin 中.此外,worker 可以通过 XMLHttpRequest访问网络,但 XMLHttpRequest 的 responseXML 和 channel 属性始终返回 null

类型 ​

  • 专用 worker 是由单个脚本使用的 worker.该上下文由DedicatedWorkerGlobalScope 对象表示
  • shared worker 是可以由在不同窗口、IFrame 等中运行的多个脚本使用的 worker，只要它们与 worker 在同一域中。它们比专用的 worker 稍微复杂一点——脚本必须通过活动端口进行通信。
  • Service Worker 基本上是作为代理服务器，位于 web 应用程序、浏览器和网络（如果可用）之间。它们的目的是（除开其他方面）创建有效的离线体验、拦截网络请求，以及根据网络是否可用采取合适的行动并更新驻留在服务器上的资源。它们还将允许访问推送通知和后台同步 API。

Worker 全局上下文和函数 ​

worker 在一个与当前 window 不同的全局上下文中运行！虽然 Window 不能直接用于 worker，但许多相同的方法被定义在一个共享的混入（WindowOrWorkerGlobalScope）中，并通过 worker 自己的 WorkerGlobalScope 衍生的上下文提供给它们：

  • DedicatedWorkerGlobalScope 用于专用 worker
  • SharedWorkerGlobalScope 用于共享 worker
  • ServiceWorkerGlobalScope 用于 service worker

所哟 Worker 和主线程 (来自 WindowOrWorkerGlobalScope ) 都要U盾一些函数(子集)是 :

  • WorkerGlobalScope.atob()
  • WorkerGlobalScope.btoa()
  • WorkerGlobalScope.clearInterval()
  • WorkerGlobalScope.clearTimeout()
  • WorkerGlobalScope.createImageBitmap()
  • WorkerGlobalScope.dump() 非标准
  • WorkerGlobalScope.fetch()
  • WorkerGlobalScope.queueMicrotask()
  • WorkerGlobalScope.reportError()
  • WorkerGlobalScope.setInterval()
  • WorkerGlobalScope.setTimeout()
  • WorkerGlobalScope.structuredClone()
  • DedicatedWorkerGlobalScope.requestAnimationFrame()（仅专用 worker）
  • DedicatedWorkerGlobalScope.cancelAnimationFrame()（仅专用 worker）

以下函数仅对 worker 可用：

  • WorkerGlobalScope.importScripts()（所有 worker）
  • DedicatedWorkerGlobalScope.postMessage()（仅限专用 worker）

支持的 Web API ​

以下 Web API 对 worker 是可用的：

  • Barcode Detection API
  • Broadcast Channel API
  • Cache API
  • Channel Messaging API
  • Console API
  • Web Crypto API（例如 Crypto）
  • CSS Font Loading API
  • CustomEvent
  • Encoding API（例如 TextEncoder、TextDecoder）
  • Fetch API
  • FileReader
  • FileReaderSync（仅在 worker 中有效！）
  • FormData
  • ImageBitmap
  • ImageData
  • IndexedDB
  • Media Source Extensions API（仅限专用 worker）
  • Network Information API
  • Notifications API
  • OffscreenCanvas（和所有的 canvas context API）
  • Performance API，包括：
  • Performance
  • PerformanceEntry
  • PerformanceMeasure
  • PerformanceMark
  • PerformanceObserver
  • PerformanceResourceTiming
  • Server-sent 事件
  • ServiceWorkerRegistration
  • URL API（例如 URL）
  • WebCodecs_API
  • WebSocket
  • XMLHttpRequest

worker 也可以派生其他 worker，所以这些 API 也是可用的：

  • Worker
  • WorkerGlobalScope
  • WorkerLocation
  • WorkerNavigator

Web Worker 接口

Worker
表示正在运行的 worker 线程，允许你将信息传递到正在运行的 worker 程序代码。

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

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

WorkerGlobalScope
表示任意 worker 的通用作用域（对于正常的网页类容来说与 Window 有相同的作用）。不同类型的 worker 都有从接口继承作用域对象，并且可以添加更多特定特性。

DedicatedWorkerGlobalScope
表示一个专用 worker 的作用域，继承自 WorkerGlobalScope，且可添加一些特有的特性。

SharedWorkerGlobalScope
表示一个共享 worker 的作用域，继承自 WorkerGlobalScope，且可添加一些特有的特性。

WorkerNavigator
表示用户代理（客户端）的身份和状态。

示例