網路工作人員總覽

到目前為止,本課程的內容大多著重於 一般 HTML 效能注意事項、資源提示、各種最佳化因素 各種資源類型,改善網頁初始載入時間和使用者反應 以及延遲載入特定資源

然而,在效能方面,有一個面向的重點在於 而這正是網路工作人員在改善 也就是輸入回應,這和下個單元將介紹這項功能

JavaScript 通常稱為單一執行緒語言。實務上 指的是「主要執行緒」,也就是瀏覽器讓瀏覽器記錄到 大多數的功能都是在瀏覽器中呈現的樣子這項工作包含 諸如編寫指令碼、某些類型的轉譯工作、HTML 和 CSS 剖析等 以及其他類型的使用者面向工作但事實上 瀏覽器「確實」使用其他執行緒來處理您 (開發人員) 的工作, 通常可直接存取,例如 GPU 執行緒

牽涉到 JavaScript 時,您通常只會在 主執行緒,但這只是預設執行緒。您可以註冊及使用 JavaScript 中會有一些額外執行緒這項功能支援 JavaScript 稱為 Web Workers API

當您需要進行運算且會耗用大量運算資源時 無法在主執行緒上執行,又會使頁面執行過長的工作 沒有回應。這類工作絕對會影響到您網站的 下一次繪製 (INP):如果貴公司有可完成的作業,會很有幫助 完全由主執行緒完成這麼做有助於為 進而加快使用者互動速度。

本單元和後續示範具體用途示範說明網頁 工作站示範本身會展示如何利用網路工作站來完成工作 從主執行緒關閉 JPEG 檔案來讀取圖片中繼資料,以及如何 可以將中繼資料傳回主執行緒供使用者查看。

網路工作站的啟動方式

Worker 類別執行個體化,即可註冊網路工作站。操作時間 因此,請指定瀏覽器載入網路工作程式程式碼的位置 然後為 建立新的執行緒產生的執行緒通常會呼叫 背景工作執行緒

const myWebWorker = new Worker('/js/my-web-worker.js');

在工作站的 JavaScript 檔案中 (在本例中為 my-web-worker.js),您可以接著 撰寫程式碼,然後在個別背景工作執行緒中執行。

Web Worker 限制

網路工作處理程序與在主執行緒上執行的 JavaScript 不同,網路工作站不具備直接存取功能 至 window 情境。並具備有限存取權網頁 工作站有下列限制:

  • Web Worker 無法直接存取 DOM。
  • Web Worker「可以」透過訊息與 window 環境通訊 管道,代表網路工作站可以透過這種方式「間接」存取 DOM。
  • Web Worker 範圍是 self,而不是 window
  • Web Worker 範圍「確實」可存取 JavaScript 原始和 和 fetchAPI 等 API 其他 API

網路工作站如何與 window 對話

網路工作站可能會與主執行緒的 window 通訊 傳遞資訊透過這個管道 透過主執行緒和網路工作站處理。如要從網路工作站將資料傳送至 您需要在網路工作站的結構定義上設定 message 事件 (self)

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

接著在主執行緒 window 結構定義的指令碼中,您可以接收 訊息:message

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});
敬上

網路工作者的訊息管道,是網路世界中的逃離目標 工作站環境使用 API 時,您可以從網路工作站將資料傳送至 window 以便更新 DOM,或執行需要在 主執行緒。

學以致用

網路工作站會在哪個執行緒上執行?

執行緒擁有執行緒 (也稱為網路背景工作執行緒)。
GPU 執行緒。
主執行緒。

網路工作者可存取什麼?

window 結構定義,但僅間接。
window 結構定義中可用的嚴格 API 子集。 包括 fetch
JavaScript 基元,例如陣列和物件。

網路工作站如何存取 `window` 結構定義?

透過 postMessage 輔助的訊息管道 方法中 (self)。
網路工作站無法透過任何方式存取 window
直接參照 window 物件的成員。

接下來:具體的網路工作站使用案例

下一個單元將詳細說明具體的網路工作站使用案例, 基準測試在這個模組中,網路工作站會從 並在網路工作站中讀取其 Exif 中繼資料。系統會將這些資料 返回要向使用者顯示的主執行緒。