Web Worker：一種在與目前主（視窗）執行緒不同的執行緒中在背景執行腳本的方法。

1. Web Workers 與使用 event_loop 的非同步
2. 網路工作者簡介
3. 如何創建網路工作者
4. 例如網路工作者
5. Web Workers 的限制
6. Web Workers 中的非同步操作

1. Web Workers 與使用事件循環的非同步操作

JavaScript通常透過將任務放入對應的佇列（巨集任務佇列、微任務佇列）來處理非同步操作，事件循環不斷檢查這些佇列，並在任務準備好執行時將其推送到呼叫堆疊中。這種方法確保非阻塞執行，但仍然在單一執行緒上運行所有內容。

Web Workers 另一方面，允許腳本在完全獨立的執行緒中運行，具有自己的呼叫堆疊、非同步佇列和事件循環。這種分離可以防止主執行緒被繁重的運算或長時間運行的任務阻塞，因為工作執行緒獨立運行。

2. Web Workers 簡介

Web Worker 在與主視窗上下文不同的上下文中執行腳本，從而實現 Web 應用程式中的並行性。 Web Worker API 提供了幾種類型的工作人員：

• Dedicated Workers：由單一腳本使用，非常適合從主執行緒卸載任務。
• 共享工作執行緒：可由在不同上下文（例如，不同視窗或 iframe）中執行的多個腳本存取。
• Service Workers：作為 Web 應用程式、瀏覽器和網路之間的代理伺服器運行，提供離線支援和快取等功能。

本文重點介紹專用工作人員，這是最容易實現且最常用的。

3. 如何建立 Web Worker

要建立Web Worker，您可以使用以下關鍵方法：

• new Worker()：建立新worker的建構子。
• postMessage()：從主執行緒向工作執行緒傳送訊息，反之亦然。
• onmessage：設定用於處理worker收到的訊息的回呼函數。
• terminate()：立即停止工作執行緒。

4. 簡單範例

讓我們創建一個工作程序來從 API 獲取數據，特別是從 Dog CEO API 獲取狗圖像。

4.1 工人代碼

這裡是worker腳本的實作。請注意，在worker內部，self用於引用全域上下文：

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

在此程式碼中，worker 偵聽訊息 (onmessage) 並根據計數指定多次從給定 URL 取得資料。

這是工作者內部的呼叫堆疊：

4.2 客戶端程式碼

主執行緒像這樣使用worker：

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

這段程式碼示範如何向worker發送訊息並在主執行緒中接收所獲取的資料。

完整代碼請訪問代碼

5. Web Workers 的限制

雖然 Web Worker 在與主視窗執行緒不同的執行緒中運行，但它們具有一定的限制：

• 無法存取 DOM：Workers 無法直接操作 DOM。更新 UI 需要與主執行緒通訊。
• 資源消耗：過度使用 Web Worker 可能會導致記憶體使用率過高，因為每個 Worker 都需要額外的資源才能獨立運作。