b站黃頁推廣2023更新/電腦版百度網(wǎng)盤
描述
由于 JavaScript 是單線程的，當執(zhí)行比較耗時的任務(wù)時，就會阻塞主線程并導致頁面無法響應(yīng)，這就是 Web Workers 發(fā)揮作用的地方。它允許在一個單獨的線程（稱為工作線程）中執(zhí)行耗時的任務(wù)。這使得 JavaScript 代碼可以在后臺執(zhí)行，而不會阻塞主線程并導致頁面無響應(yīng)。
Web Worker 是一個作為后臺線程運行的腳本，具有自己的引擎實例和事件循環(huán)。它與主執(zhí)行線程并行運行，并且不會阻塞事件循環(huán)。
主線程（或工作線程本身）可以啟動任意數(shù)量的工作線程。生成 worker 腳本：
-
主線程（或另一個工作線程）向新工作線程發(fā)送一條消息，其中包含所有必要的數(shù)據(jù)。
-
工作線程中的事件處理程序執(zhí)行并開始處理數(shù)據(jù)。
-
完成（或失敗）時，工作線程將一條帶有計算結(jié)果的消息發(fā)送回主線程。
-
主線程中的事件處理程序執(zhí)行、解析傳入結(jié)果并運行必要的操作（例如顯示值）。
重要性
Web Workers 為開發(fā)人員提供了在 Web 上實現(xiàn)多線程的方式，這對于構(gòu)建高性能的 Web 應(yīng)用至關(guān)重要。通過將耗時的任務(wù)在后臺獨立于主線程中執(zhí)行，Web Workers 提高了網(wǎng)頁的整體響應(yīng)性，并使用戶體驗更加流暢。以下是 Web Workers 在 Web 多線程中的重要性和好處：
通過資源利用率
通過允許耗時任務(wù)在后臺執(zhí)行，Web Workers 更有效地利用系統(tǒng)資源，實現(xiàn)更快速和高效的數(shù)據(jù)處理，并提高整體性能。這對于涉及大量數(shù)據(jù)處理或圖像操作的 Web 應(yīng)用尤為重要，因為 Web Workers 可以在不影響用戶界面的情況下執(zhí)行這些任務(wù)。
增加穩(wěn)定性和可靠性
通過將耗時任務(wù)隔離到單獨的 worker 線程中，Web Workers 幫助防止在主線程上執(zhí)行大量代碼時發(fā)生崩潰和錯誤。這使得開發(fā)人員更容易編寫穩(wěn)定可靠的 Web 應(yīng)用，減少用戶的煩惱和數(shù)據(jù)丟失的可能性。
增強安全性
Web Workers 在與主線程分離的隔離環(huán)境中運行，這有助于提高 Web 應(yīng)用的安全性。此隔離防止惡意代碼訪問或修改主線程或其他 Web Workers 中的數(shù)據(jù)，降低數(shù)據(jù)泄露或其他安全漏洞的風險。
更好的資源利用率
Web Workers 可以通過將耗時計算放到后臺，使主線程用于處理用戶輸入和其他任務(wù)來幫助提高資源利用率。這有助于提高系統(tǒng)的整體性能并減少崩潰或錯誤的可能性。此外，通過利用多個 CPU 核心，Web Workers 可以更有效地利用系統(tǒng)資源，實現(xiàn)更快速和高效的數(shù)據(jù)處理。
Web Workers 還能夠?qū)崿F(xiàn)更好的負載平衡和擴展應(yīng)用。通過允許任務(wù)在多個 worker 線程之間并行執(zhí)行，Web Workers 可以幫助將工作負荷均勻分配到多個核心或處理器上，實現(xiàn)更快速和高效的數(shù)據(jù)處理。這對于經(jīng)歷高流量或需求的應(yīng)用尤為重要，因為 Web Workers 可以幫助確保應(yīng)用可以處理增加的負載而不影響性能。
Web Workers 客戶端使用
使用 JavaScript 創(chuàng)建 Web Worker 的步驟如下：
-
創(chuàng)建一個新的 JavaScript 文件，其中包含要在工作線程中運行的代碼（耗時任務(wù)）。該文件不應(yīng)包含對 DOM 的引用，因為在工作線程中無法訪問 DOM。
-
在主 JavaScript 文件中，使用?
Worker?構(gòu)造函數(shù)創(chuàng)建一個新的worker對象。此構(gòu)造函數(shù)接收一個參數(shù)，即在步驟 1 中創(chuàng)建的 JavaScript 文件的 URL。
const worker = new Worker('worker.js');
-
向
worker對象添加事件偵聽器以處理主線程和工作線程之間發(fā)送的消息。onmessage?用于處理從工作線程發(fā)送來的消息，postMessage?用于向工作線程發(fā)送消息。
worker.onmessage = function(event) {console.log('Worker: ' + event.data);
};worker.postMessage('Hello, worker!');
-
在 Web Worker 的 JavaScript 文件中，使用
self對象的onmessage屬性添加一個事件監(jiān)聽器來處理從主線程發(fā)出的消息?？梢允褂?code>event.data屬性訪問發(fā)送的消息數(shù)據(jù)。
self.onmessage = function(event) {console.log('Main: ' + event.data);self.postMessage('Hello, Main!');
};
接下來就運行應(yīng)用并測試 Worker?？梢栽诳刂婆_看到以下信息，表示主線程和 Worker 線程之間發(fā)送和接收了消息。
Main：Hello worker！
Worker：Hello Main！
我們可以使用terminate()函數(shù)來終止一個工作線程，或者通過調(diào)用self上的close()函數(shù)使其自行終止。
// 從應(yīng)用中終止一個工作線程
worker.terminate();
// 讓一個工作線程自行終止
self.close();
可以使用importScripts()函數(shù)將庫或文件導入到工作線程中，該函數(shù)可以接受多個文件。以下示例將script1.js和script2.js加載到工作線程?worker.js?中：
importScripts('script1.js','script2');
可以使用?onerror函數(shù)來處理工作線程拋出的錯誤：
worker.onerror = function(err) {console.log("遇到錯誤")
}
Web Workers 服務(wù)端應(yīng)用
服務(wù)器端 JavaScript 運行時也支持 Web Worker：
-
Node.js 在版本 10 中實現(xiàn)了類似 Web Worker 的功能，稱為 Worker thread（工作進程）。
-
Deno 復(fù)制了 Web Worker API，因此語法與瀏覽器代碼完全相同。它還提供了兼容模式，可以填充 Node.js API，以便可以使用該運行時的工作線程語法。
-
Bun 將支持瀏覽器和 Node.js 的 Web Worker API。
基本使用
要在 Node.js 中使用 Web Worker，主腳本必須定義一個?Worker?對象，其中包含相對于項目根目錄的 Web Worker 腳本的名稱。第二個參數(shù)定義了一個對象，其中包含一個workerData屬性，該屬性包含要發(fā)送的數(shù)據(jù)：
const worker = new Worker('./worker.js', {workerData: { a: 1, b: 2, c: 3 }
});
與瀏覽器中的 Web Worker 不同， 它在啟動時無需運行worker.postMessage()。如果需要的話，可以調(diào)用該方法并稍后發(fā)送更多數(shù)據(jù)，它會觸發(fā)parentPort.on('message')事件處理程序:
parentPort.on('message', e => {console.log(e);
});
一旦工作線程完成處理，它會使用以下方法將結(jié)果數(shù)據(jù)發(fā)送回主線程：
parentPort.postMessage(result);
這將在在主腳本中觸發(fā)?message?事件，主線程接收到 worker 返回的結(jié)果：
worker.on('message', result => {console.log( result );
});
在發(fā)送完消息后，worker 就會終止。這也會觸發(fā)一個exit事件，如果希望運行清理或其他函數(shù)，可以利用這個事件：
worker.on('exit', code => {
//...
});除此之外，還支持其他事件處理：
-
messageerror：當 worker 收到無法反序列化的數(shù)據(jù)時觸發(fā)。 -
online：當 worker 開始執(zhí)行時觸發(fā)。 -
error：當 worker 腳本中發(fā)生 JavaScript 錯誤時觸發(fā)。
在服務(wù)端，一個單獨的 Node.js 腳本文件可以同時包含主線程和工作線程的代碼。腳本必須使用isMainThread檢查自身是否在主線程上運行，然后將自身作為工作線程進行調(diào)用（可以在 ES 模塊中使用import.meta.url作為文件引用，或者在 CommonJS 中使用__filename）。
import { Worker, isMainThread, workerData, parentPort } from "node:worker_threads";if (isMainThread) {// 主線程const worker = new Worker(import.meta.url, {workerData: { a: 1, b: 2, c: 3 }});worker.on('message', msg => {});worker.on('exit', code => {});
}
else {// 工作線程const result = runSomeProcess( workerData );parentPort.postMessage(result);
}
這種方式更快，并且對于小型、自包含的單腳本項目來說是一個選擇。如果是大型項目，將 worker 腳本文件分開會更容易維護。
數(shù)據(jù)通信
主線程和工作線程之間的通信涉及到了數(shù)據(jù)序列化?？梢允褂帽硎竟潭ㄩL度原始二進制數(shù)據(jù)的SharedArrayBuffer對象在線程之間共享數(shù)據(jù)。以下是一個示例，主線程定義了從 0 到 99 的 100 個數(shù)字元素，并將其發(fā)送給工作線程：
// main.js
import { Worker } from "node:worker_threads";constbuffer = new SharedArrayBuffer(100 * Int32Array.BYTES_PER_ELEMENT),value = new Int32Array(buffer);value.forEach((v,i) => value[i] = i);const worker = new Worker('./worker.js');worker.postMessage({ value });
工作線程可以接收?value對象：
// worker.js
import { parentPort } from 'node:worker_threads';parentPort.on('message', value => {value[0] = 100;
});
主線程或工作線程都可以更改值數(shù)組中的元素，數(shù)據(jù)將在兩個線程之間保持一致。這可能會提高性能，但有一些缺點：
-
只能共享整數(shù)數(shù)據(jù)。
-
可能仍需要通知另一個線程更改。
-
存在兩個線程可能同時更新同一值并且失去同步的風險。
Node.js 子進程
在 Node.js 中，除了使用工作線程外，還可以使用子進程來實現(xiàn)類似的功能。子進程用于啟動其他應(yīng)用、傳遞數(shù)據(jù)并接收結(jié)果。它們與工作線程類似，但通常效率較低，進程開銷較大。
子進程和工作線程的選擇取決于具體的應(yīng)用場景。如果只需要在 Node.js 中執(zhí)行其他任務(wù)或命令，子進程是一種更好的選擇。但如果需要在 Node.js 中進行復(fù)雜的計算或處理任務(wù)，Web Worker 可能更適合。
Web Workers 應(yīng)用場景
Web Workers 在實際應(yīng)用中有許多常見且有用的應(yīng)用場景。
處理 CPU 密集任務(wù)
假設(shè)有一個應(yīng)用需要執(zhí)行大量的 CPU 密集型計算。如果在主線程中執(zhí)行這些計算，用戶界面可能會變得無響應(yīng)，用戶體驗將受到影響。為了避免這種情況，可以使用 Web Worker 在后臺執(zhí)行這些計算。
在主線程中：
// 創(chuàng)建一個新的 Web Worker
const worker = new Worker('worker.js');// 定義一個函數(shù)來處理來自Web Worker的消息
worker.onmessage = function(event) {const result = event.data;console.log(result);
};// 向Web Worker發(fā)送一個消息，以啟動計算
worker.postMessage({ num: 1000000 });
在 worker.js 中:
// 定義一個函數(shù)來執(zhí)行計算
function compute(num) {let sum = 0;for (let i = 0; i < num; i++) {sum += i;}return sum;
}// 定義一個函數(shù)來處理來自主線程的消息
onmessage = function(event) {const num = event.data.num;const result = compute(num);postMessage(result);
};
在這個例子中，創(chuàng)建了一個新的 Web Worker，并定義了一個函數(shù)來處理來自 Web Worker 的消息。然后，向 Web Worker 發(fā)送一條消息，并提供一個參數(shù)（num），指定要執(zhí)行計算的迭代次數(shù)。Web Worker 接收到這條消息后，在后臺執(zhí)行計算。當計算完成后，Web Worker 向主線程發(fā)送一條包含結(jié)果的消息。主線程收到這個消息后，將結(jié)果記錄到控制臺中。
在上面的例子中，向 Web Worker 的compute()函數(shù)傳遞了數(shù)字 1000000。這意味著compute函數(shù)將需要將從 0 到一百萬的所有數(shù)字相加。這涉及大量的額外操作，可能需要很長時間才能完成，特別是如果代碼在較慢的計算機上運行或在瀏覽器標簽中同時處理其他任務(wù)。
通過將這個任務(wù)分配給 Web Worker，應(yīng)用的主線程可以繼續(xù)平穩(wěn)運行，而不會被計算密集型的任務(wù)阻塞。這使得用戶界面保持響應(yīng)，并確保其他任務(wù)（如用戶輸入或動畫）可以在沒有延遲的情況下處理。
處理網(wǎng)絡(luò)請求
假設(shè)有一個應(yīng)用需要發(fā)起大量的網(wǎng)絡(luò)請求。如果在主線程中執(zhí)行這些請求，可能會導致用戶界面無響應(yīng)，用戶體驗差。為了避免這個問題，可以利用 Web Worker 在后臺處理這些請求。通過這樣做，主線程可以同時執(zhí)行其他任務(wù)，而 Web Worker 負責處理網(wǎng)絡(luò)請求，從而提高性能和改善用戶體驗。
在主線程中：
// 創(chuàng)建一個新的 Web Worker
const worker = new Worker('worker.js');// 定義一個函數(shù)來處理來自Web Worker的消息
worker.onmessage = function(event) {const response = event.data;console.log(response);
};// 向Web Worker發(fā)送一個消息，以啟動計算
worker.postMessage({ urls: ['https://api.example.com/foo', 'https://api.example.com/bar'] });
在 worker.js 中:
// 定義一個函數(shù)來執(zhí)行網(wǎng)絡(luò)請求
function request(url) {return fetch(url).then(response => response.json());
}// 定義一個函數(shù)來處理來自主線程的消息
onmessage = async function(event) {const urls = event.data.urls;const results = await Promise.all(urls.map(request));postMessage(results);
};在這個例子中，創(chuàng)建一個新的 Web Worker 并定義一個函數(shù)來處理來自該 Worker 的消息。然后，向 Worker 發(fā)送一個包含一組 URL 請求的消息。Worker 接收到這個消息后，在后臺使用 fetch API 執(zhí)行請求。當所有請求完成后，Worker 向主線程發(fā)送包含結(jié)果的消息。主線程接收到這個消息后，將結(jié)果記錄到控制臺中。
并行處理
假設(shè)應(yīng)用需要執(zhí)行大量獨立計算。 如果在主線程中依次執(zhí)行這些計算，用戶界面將變得無響應(yīng)，用戶體驗將受到影響。 為了避免這種情況，可以實例化多個 Web Worker 來并行執(zhí)行計算。
在主線程中：
// 創(chuàng)建三個新的 Web Worker
const worker1 = new Worker('worker.js');
const worker2 = new Worker('worker.js');
const worker3 = new Worker('worker.js');// 定義三個處理來自 worker 的消息的函數(shù)
worker1.onmessage = handleWorkerMessage;
worker2.onmessage = handleWorkerMessage;
worker3.onmessage = handleWorkerMessage;function handleWorkerMessage(event) {const result = event.data;console.log(result);
}// 將任務(wù)分配給不同的 worker 對象，并發(fā)送消息啟動計算
worker1.postMessage({ num: 1000000 });
worker2.postMessage({ num: 2000000 });
worker3.postMessage({ num: 3000000 });
在 worker.js 中:
// 定義一個函數(shù)來執(zhí)行單個計算
function compute(num) {let sum = 0;for (let i = 0; i < num; i++) {sum += i;
}return sum;
}// 定義一個函數(shù)來處理來自主線程的消息
onmessage = function(event) {const result = compute(event.data.num);postMessage(result);
};
在這個例子中，創(chuàng)建三個新的 Web Worker 并定義一個函數(shù)來處理來自該 Worker 的消息。然后，向三個 Worker 分別發(fā)送一個要計算的數(shù)字消息。Worker 接收到這個消息后執(zhí)行計算。當計算完成后，Worker 向主線程發(fā)送包含結(jié)果的消息。主線程接收到這個消息后，將結(jié)果記錄到控制臺中。
Web Workers 使用限制
Web Worker 是一個提高 Web 應(yīng)用性能和響應(yīng)能力的強大工具，但它們也有一些限制和注意事項。
瀏覽器支持
目前所有主流瀏覽器、Node.js、Deno 和 Bun 都支持 Web Workers。
?
對 DOM 的訪問受到限制
Web Worker 在單獨的線程中運行，無法直接訪問主線程中的 DOM 或其他全局對象。這意味著不能直接從 Web Worker 中操作 DOM，也不能訪問像window或document這樣的全局對象。
為了解決這個限制，可以使用postMessage方法與主線程進行通信，間接地更新 DOM 或訪問全局對象。例如，使用postMessage將數(shù)據(jù)發(fā)送到主線程，然后根據(jù)接收到的消息來更新 DOM 或全局對象。
另外，還有一些庫可以幫助解決這個問題。例如，WorkerDOM[1]?庫允許在 Web Worker 中運行 DOM，從而加快頁面的渲染速度并提高性能。
現(xiàn)代桌面瀏覽器支持共享工作線程，即在不同窗口、iframes 或工作線程中可被多個腳本訪問的單個腳本，它們通過獨立的端口進行通信。但是，大多數(shù)移動瀏覽器不支持共享工作線程，所以對于大多數(shù) Web 項目來說，它們并不實用。
通信開銷大
Web Worker 使用postMessage方法與主線程進行通信，這可能會引入通信開銷。通信開銷指的是在兩個或多個計算系統(tǒng)之間建立和維護通信所需的時間和資源量，比如在 Web 應(yīng)用中，Web Worker 與主線程之間的通信。這可能導致消息處理延遲，潛在地減慢應(yīng)用程序的速度。為了最小化這種開銷，應(yīng)該只在線程之間發(fā)送必要的數(shù)據(jù)，避免發(fā)送大量數(shù)據(jù)或頻繁發(fā)送消息。
調(diào)試工具有限
與在主線程中調(diào)試代碼相比，調(diào)試 Web Worker 可能更具挑戰(zhàn)性，因為可用的調(diào)試工具較少。為了簡化調(diào)試過程，可以使用控制臺 API 在 Worker 線程中記錄消息，并使用瀏覽器開發(fā)者工具檢查線程之間發(fā)送的消息。
代碼復(fù)雜度
使用 Web Worker 可能會增加代碼的復(fù)雜性，因為需要管理線程之間的通信，并確保數(shù)據(jù)正確傳遞。這可能會使編寫、調(diào)試和維護代碼更加困難，因此應(yīng)該仔細考慮是否有必要在應(yīng)用中使用 Web Worker。
Web Workers 實踐
上面提到了在使用 Web Workers 時，可能會出現(xiàn)的一些潛在問題。下面就來看看如何緩解這些問題。
worker.on('message', result => {console.log( result );
});
消息批處理
消息批處理涉及將多個消息組合成一個批處理消息，這比單獨發(fā)送個別消息更有效。這種方法減少了主線程和 Web Worker 之間往返的數(shù)量，它有助于最小化通信開銷并提高應(yīng)用的整體性能。
為了實現(xiàn)消息批量處理，可以使用隊列來累積消息，并在隊列達到一定閾值或經(jīng)過設(shè)定時間后將消息批量發(fā)送。下面來在 Web Worker 中簡單實現(xiàn)消息的批處理：
// 創(chuàng)建一個消息隊列累積消息
const messageQueue = [];// 創(chuàng)建一個將消息添加到隊列的函數(shù)
function addToQueue(message) {messageQueue.push(message);// 檢查隊列是否達到閾值大小if (messageQueue.length >= 10) {// 如果是，請將批處理消息發(fā)送到主線程postMessage(messageQueue);// 清除消息隊列messageQueue.length = 0;}
}// 將消息添加到隊列中
addToQueue({type: 'log', message: 'Hello, world!'});// 再添加另一條消息到隊列中
addToQueue({type: 'error', message: 'An error occurred.'});
在這個例子中， 創(chuàng)建了一個消息隊列，用于累積需要發(fā)送到主線程的消息。每當使用addToQueue函數(shù)將消息添加到隊列時，檢查隊列是否已達到閾值大小（10）。如果是，則使用postMessage方法將批處理消息發(fā)送到主線程。然后，清除消息隊列，以準備進行下一次批處理。
通過以這種方式批處理消息，可以減少主線程和 Web Worker 之間發(fā)送的消息總數(shù)，從而提高應(yīng)用性能。
避免同步方法
同步方法是阻塞其他代碼執(zhí)行的 JavaScript 函數(shù)或操作。同步方法可以阻塞主線程，導致應(yīng)變得無響應(yīng)。為了避免這種情況，應(yīng)盡量避免在 Web Worker 中使用同步方法。而應(yīng)該使用setTimeout()或setInterval()等異步方法來執(zhí)行長時間運行的計算。
// 在Web Worker中
self.addEventListener('message', (event) => {if (event.data.action === 'start') {// 使用setTimeout來異步執(zhí)行計算setTimeout(() => {const result = doSomeComputation(event.data.data);// 將結(jié)果發(fā)送回主線程self.postMessage({ action: 'result', data: result });}, 0);}
});
注意內(nèi)存使用情況
Web Workers 有自己的內(nèi)存空間，這個空間根據(jù)用戶的設(shè)備和瀏覽器設(shè)置可能是有限的。為了避免內(nèi)存問題，應(yīng)該注意你的 Web Worker 代碼使用的內(nèi)存量，并避免不必要地創(chuàng)建大對象。例如：
// 在Web Worker中
self.addEventListener('message', (event) => {if (event.data.action === 'start') {// 使用for循環(huán)處理一個數(shù)據(jù)數(shù)組const data = event.data.data;const result = [];for (let i = 0; i < data.length; i++) {// 處理數(shù)組中的每個項，并將結(jié)果添加到結(jié)果數(shù)組中const itemResult = processItem(data[i]);result.push(itemResult);}// 將結(jié)果發(fā)送回主線程self.postMessage({ action: 'result', data: result });}
});
在這段代碼中，Web Worker 處理一個數(shù)據(jù)數(shù)組，并使用postMessage方法將結(jié)果發(fā)送回主線程。然而，用于處理數(shù)據(jù)的 for 循環(huán)可能耗時較長。
導致這個問題的原因是代碼一次性處理了整個數(shù)據(jù)數(shù)組，這意味著所有的數(shù)據(jù)都必須同時加載到內(nèi)存中。如果數(shù)據(jù)集非常大，這可能導致 Web Worker 消耗大量的內(nèi)存，甚至超過瀏覽器為 Web Worker 分配的內(nèi)存限制。
為了緩解這個問題，可以考慮使用內(nèi)置的 JavaScript 方法，如forEach或reduce，它們可以逐項處理數(shù)據(jù)，避免一次性加載整個數(shù)組到內(nèi)存中。
瀏覽器兼容性
大多數(shù)現(xiàn)代瀏覽器都支持 Web Worker，但某些較舊的瀏覽器可能不支持它們。 為了確保與各種瀏覽器的兼容性，應(yīng)該在不同的瀏覽器和版本中測試 Web Worker 代碼。 還可以使用功能檢測來檢查 Web Worker 是否受支持，然后再在代碼中使用它們，如下所示：
if (typeof Worker !== 'undefined') {const worker = new Worker('worker.js');
} else {console.log('Web Workers are not supported in this browser.');
}這段代碼會檢查當前瀏覽器是否支持 Web Workers，并在支持時創(chuàng)建一個新的 Web Worker。如果 Web Workers 不受支持，則該代碼記錄一條消息到控制臺，表示該瀏覽器不支持 Web Workers。
總結(jié)
Web Workers 是現(xiàn)代 Web 開發(fā)的一個基本特性，它允許開發(fā)人員將 CPU 密集型任務(wù)放到單獨的線程中執(zhí)行，從而提高應(yīng)用的性能和響應(yīng)能力。然而，在處理 Web Workers 時需要記住一些重要的限制和注意事項，例如無法訪問 DOM 和數(shù)據(jù)類型之間傳遞的限制等。為了避免這些潛在問題，可以采用上面提到的策略，如使用異步方法并注意卸載的任務(wù)的復(fù)雜性。在未來，使用 Web Workers 進行多線程似乎仍然是提高 Web 應(yīng)用程序性能和響應(yīng)能力的重要技術(shù)。