什么是 JavaScript 中的 Worker？

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

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

Worker 的核心特點(diǎn)：

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

基本使用

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

1. Web Worker：標(biāo)準(zhǔn)的 Worker，用于網(wǎng)頁中的后臺(tái)線程。
2. Service Worker：專門用于網(wǎng)絡(luò)請(qǐng)求的 Worker。
3. Shared Worker：可以被多個(gè)腳本或頁面共享的 Worker。

下面我們先來重點(diǎn)講解 Web Worker 的使用。

創(chuàng)建 Web Worker

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

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

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

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

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

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

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

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

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

3. 停止 Worker

當(dāng)任務(wù)完成后，可以選擇手動(dòng)終止 Worker：

// 終止 Worker
worker.terminate();

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

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

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

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    // 假設(shè)傳入的是一個(gè)對(duì)象，我們對(duì)它的屬性進(jìn)行處理
    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ā)送一個(gè)對(duì)象
worker.postMessage({ number: 5 });
// 監(jiān)聽 Worker 返回的對(duì)象
worker.onmessage = function(event) {
    const result = event.data;
    console.log('平方:', result.squared);   // 輸出: 25
    console.log('翻倍:', result.doubled);  // 輸出: 10
};

Worker 的局限性

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

實(shí)際場景中的應(yīng)用

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

示例：使用 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)心這個(gè)參數(shù)的值，它是Array.from方法的第一個(gè)參數(shù)，即生成數(shù)組時(shí)當(dāng)前元素的值
//i是第二個(gè)參數(shù)，表示當(dāng)前數(shù)組元素的索引
const largeArray = Array.from({ length: 1000000 }, (_, i) => i);
worker.postMessage(largeArray);
worker.onmessage = function(event) {
    console.log('處理完成的數(shù)據(jù):', event.data); // 將顯示處理后的數(shù)據(jù)
};

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

總結(jié)

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

關(guān)鍵點(diǎn)回顧：

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

可以嘗試將復(fù)雜計(jì)算任務(wù)移到 Worker 中，這樣可以提高用戶體驗(yàn)并保持應(yīng)用的流暢性。

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

最新評(píng)論