網路工作人員總覽

到目前為止，本課程的內容大多著重於 一般 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 原始和 和 fetch 和 API 等 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 執行緒。
請再試一次。

網路工作者可存取什麼？

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

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

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

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

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