目前,本課程的大部分內容都著重於概念,例如一般 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,或在主執行緒上執行其他必須完成的工作。
學以致用
網路工作站會在哪個執行緒上執行?
網路工作站可存取哪些內容?
window
結構定義中提供的 API 子集,包括 fetch
。window
結構定義,但僅限間接使用。網路工作站如何存取「視窗」內容?
window
物件的成員。window
。self
) 中的 postMessage
方法提供的訊息管道。下一項:具體的網路工作站使用案例
在下一個單元中,我們會詳細介紹具體的網路工作站使用案例。在該模組中,網路工作站將用於從特定網址擷取 JPEG 檔案,並在網路工作站讀取其 Exif 中繼資料。接著,將資料傳回主執行緒,以便向使用者顯示。