什么是 JavaScript 中的 Worker？

JavaScript 中的 Worker 是一個可以在后臺線程中運行代碼的 API，這樣可以避免主線程（通常是 UI 線程）被阻塞。使用 Worker 時，JavaScript 可以在多線程環(huán)境中工作，解決了單線程的瓶頸問題。

通常情況下，JavaScript 是單線程的，也就是所有的代碼（包括 DOM 操作和事件處理等）都在同一個線程里執(zhí)行。如果某段代碼需要大量計算，或者運行時間過長，會阻塞整個頁面，導致界面卡頓甚至崩潰。Worker 提供了一種將復雜或耗時的任務分配到后臺線程執(zhí)行的方法。

Worker 的核心特點：

1. 后臺線程：Worker 代碼在與主線程不同的后臺線程中執(zhí)行。
2. 無阻塞：可以處理計算密集型任務而不阻塞主線程。
3. 無 DOM 訪問：Worker 不能直接訪問主線程中的 DOM（文檔對象模型），它們只能通過消息與主線程進行通信。
4. 消息傳遞：主線程和 Worker 通過 postMessage() 和 onmessage 事件來交換數(shù)據(jù)。

基本使用

JavaScript 中有幾種 Worker，不同 Worker 的用法略有區(qū)別：

1. Web Worker：標準的 Worker，用于網(wǎng)頁中的后臺線程。
2. Service Worker：專門用于網(wǎng)絡(luò)請求的 Worker。
3. Shared Worker：可以被多個腳本或頁面共享的 Worker。

下面我們先來重點講解 Web Worker 的使用。

創(chuàng)建 Web Worker

你需要創(chuàng)建一個單獨的 JavaScript 文件作為 Worker 的入口點，然后在主線程中啟動 Worker。假設(shè)我們有一個需要在 Worker 中運行的文件 worker.js，并且有一個主線程腳本 main.js。

1. 創(chuàng)建 Worker 文件

首先，我們編寫一個 worker.js 文件，里面包含 Worker 將要執(zhí)行的代碼：

// worker.js
// Worker 內(nèi)部不能訪問 DOM，但可以執(zhí)行任何復雜的計算任務
self.onmessage = function(event) {
    // 接收主線程發(fā)送的數(shù)據(jù)
    const number = event.data;
    // 進行耗時的計算任務，比如計算一個數(shù)的平方
    const result = number * number;
    // 將結(jié)果返回給主線程
    self.postMessage(result);
};

self 是 Worker 內(nèi)部的全局對象，它相當于主線程中的 window，但沒有 UI 相關(guān)的 API（比如不能操作 DOM）。onmessage 監(jiān)聽主線程發(fā)送的數(shù)據(jù)，而 postMessage 用于將結(jié)果返回給主線程。

2. 在主線程中創(chuàng)建 Worker

接下來，我們在 main.js 中創(chuàng)建并使用 Worker：

// main.js
// 創(chuàng)建一個新的 Worker 實例，指向 worker.js 文件
const worker = new Worker('worker.js');
// 主線程向 Worker 發(fā)送消息
worker.postMessage(10); // 發(fā)送數(shù)字 10，Worker 將計算 10 的平方
// 監(jiān)聽 Worker 返回的消息
worker.onmessage = function(event) {
    console.log('從 Worker 接收到的數(shù)據(jù):', event.data); // 輸出: 100
};
// 錯誤處理
worker.onerror = function(error) {
    console.error('Worker 出現(xiàn)錯誤:', error.message);
};

在這個例子中，postMessage() 方法用于從主線程向 Worker 發(fā)送數(shù)據(jù)，onmessage 方法用于監(jiān)聽 Worker 處理完任務后返回的數(shù)據(jù)。Worker 可以用于運行像計算密集型任務（如數(shù)學運算、數(shù)據(jù)處理）而不會影響主線程的流暢性。

3. 停止 Worker

當任務完成后，可以選擇手動終止 Worker：

// 終止 Worker
worker.terminate();

一旦 terminate() 被調(diào)用，Worker 將立即停止執(zhí)行，并且不會再處理任何任務。適當終止 Worker 可以節(jié)省系統(tǒng)資源。

使用 Worker 傳遞復雜數(shù)據(jù)

Worker 不僅可以處理簡單的數(shù)據(jù)類型（如數(shù)字和字符串），還可以傳遞更復雜的數(shù)據(jù)（如對象和數(shù)組）。這里我們擴展上面的例子，傳遞一個對象到 Worker 并讓 Worker 處理它：

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    // 假設(shè)傳入的是一個對象，我們對它的屬性進行處理
    const result = {
        squared: data.number * data.number,
        doubled: data.number * 2
    };
    // 返回結(jié)果給主線程
    self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');
// 向 Worker 發(fā)送一個對象
worker.postMessage({ number: 5 });
// 監(jiān)聽 Worker 返回的對象
worker.onmessage = function(event) {
    const result = event.data;
    console.log('平方:', result.squared);   // 輸出: 25
    console.log('翻倍:', result.doubled);  // 輸出: 10
};

Worker 的局限性

1. 無法訪問 DOM：Worker 不能直接操作 DOM。如果你需要進行與 UI 相關(guān)的操作，必須通過 postMessage() 與主線程通信。
2. 同源策略：Worker 腳本必須與頁面腳本同源，不能跨域加載 Worker 文件。
3. 性能開銷：雖然 Worker 可以提高性能，但創(chuàng)建 Worker 本身也有一定的開銷，特別是創(chuàng)建大量 Worker 時會增加資源消耗。
4. 腳本文件：創(chuàng)建 Worker 必須通過外部文件，不能直接在同一個腳本內(nèi)定義 Worker 的代碼。

實際場景中的應用

1. 處理大數(shù)據(jù)：Worker 常用于數(shù)據(jù)密集型計算（如圖像處理、文件解析、復雜算法）。
2. 保持 UI 流暢：在不阻塞用戶界面的情況下執(zhí)行長時間運行的任務。
3. 實時數(shù)據(jù)處理：通過 Worker 進行后臺的數(shù)據(jù)處理、文件操作等，不會影響頁面的響應速度。

示例：使用 Worker 處理大量數(shù)據(jù)

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    const processedData = data.map(item => item * 2); // 模擬處理大量數(shù)據(jù)
    self.postMessage(processedData);
};

// main.js
const worker = new Worker('worker.js');
// 模擬大量數(shù)據(jù)
//'-'是占位符，表示不關(guān)心這個參數(shù)的值，它是Array.from方法的第一個參數(shù)，即生成數(shù)組時當前元素的值
//i是第二個參數(shù)，表示當前數(shù)組元素的索引
const largeArray = Array.from({ length: 1000000 }, (_, i) => i);
worker.postMessage(largeArray);
worker.onmessage = function(event) {
    console.log('處理完成的數(shù)據(jù):', event.data); // 將顯示處理后的數(shù)據(jù)
};

在這個例子中，我們生成了一個包含百萬個元素的數(shù)組并交給 Worker 處理。處理完成后，Worker 將返回一個新的數(shù)組給主線程。

總結(jié)

JavaScript 中的 Worker API 是一種強大的工具，能夠幫助開發(fā)者處理耗時任務，避免頁面卡頓。它主要通過后臺線程執(zhí)行代碼，避免阻塞主線程，并通過消息傳遞與主線程進行通信。

關(guān)鍵點回顧：

• Worker 是運行在后臺線程中的腳本，主線程與 Worker 通過 postMessage() 和 onmessage 通信。
• Worker 不能訪問 DOM，但適合用于計算密集型任務。
• 創(chuàng)建 Worker 有一定開銷，建議合理使用，尤其是在多 Worker 環(huán)境下。

可以嘗試將復雜計算任務移到 Worker 中，這樣可以提高用戶體驗并保持應用的流暢性。

到此這篇關(guān)于JS中Worker相關(guān)知識點及用法詳細解讀的文章就介紹到這了,更多相關(guān)js中worker內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論