網路工作人員總覽

目前，本課程的大部分內容都著重於概念，例如一般 HTML 效能注意事項、資源提示、最佳化各種資源類型以改善初始頁面載入時間和回應使用者輸入，以及延遲載入特定資源。

不過，這部分與 JavaScript 的效能有關，但這部分尚未說明。此外，網路工作人員要提高輸入回應速度，就是其中和下一個單元的內容。

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) 中，編寫程式碼，然後在另一個工作站執行緒中執行。

網路工作站限制

與在主執行緒上執行的 JavaScript 不同，網路工作站無法直接存取 window 結構定義，而且對其提供的 API 存取權有限。網路工作站受下列限制：

• Web Worker 無法直接存取 DOM。
• 網路工作站可以透過訊息傳遞管道與 window 內容通訊，這表示網路工作站可透過「間接」存取 DOM。
• 網路工作站範圍為 self，而非 window。
• Web 工作站範圍確實可以存取 JavaScript 原始項目和結構，以及 fetch 和相當大量的其他 API 等 API。

網路工作人員如何與 window 對話

網路工作站可以透過訊息管道與主要執行緒的 window 結構定義通訊。此管道可讓您將資料轉入主執行緒和網路工作站，或從主執行緒和網路工作站轉運。如要從網路工作站將資料傳送至主要執行緒，請在網路工作站的結構定義 (self) 上設定 message 事件

// 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);
});

網路工作站的訊息管道是來自網路工作站情境的替代方法。透過它，您可以將資料從網路工作站傳送至 window，用來更新 DOM，或在主執行緒上執行其他必須完成的工作。

學以致用

下一項：具體的網路工作站使用案例

在下一個單元中，我們會詳細介紹具體的網路工作站使用案例。在該模組中，網路工作站將用於從特定網址擷取 JPEG 檔案，並在網路工作站讀取其 Exif 中繼資料。接著，將資料傳回主執行緒，以便向使用者顯示。