到目前為止,本課程的內容大多著重於 一般 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,或執行需要在
主執行緒。
學以致用
網路工作站會在哪個執行緒上執行?
網路工作者可存取什麼?
window
結構定義中可用的嚴格 API 子集。
包括 fetch
。
window
結構定義,但僅間接。網路工作站如何存取 `window` 結構定義?
postMessage
輔助的訊息管道
方法中 (self
)。
window
。
window
物件的成員。
接下來:具體的網路工作站使用案例
下一個單元將詳細說明具體的網路工作站使用案例, 基準測試在這個模組中,網路工作站會從 並在網路工作站中讀取其 Exif 中繼資料。系統會將這些資料 返回要向使用者顯示的主執行緒。