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 |