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

另見