JavaScript 以單個(gè)序列運(yùn)行代碼，這稱為單線程。這種設(shè)計(jì)對(duì)于網(wǎng)絡(luò)瀏覽器中的簡(jiǎn)單任務(wù)來說效果很好，但是當(dāng)主線程被繁重的任務(wù)（例如復(fù)雜的計(jì)算或后臺(tái)操作）阻塞時(shí)，它可能會(huì)導(dǎo)致問題。這些任務(wù)可能會(huì)使頁(yè)面變慢且無響應(yīng)。為了解決這個(gè)問題，JavaScript 提供了 Web Workers，它允許您將繁重的任務(wù)轉(zhuǎn)移到單獨(dú)的線程，保持主線程空閑，以實(shí)現(xiàn)流暢的用戶交互。

什么是網(wǎng)絡(luò)工作者？

Web Workers 是 Web API 的一項(xiàng)功能，允許 JavaScript 代碼在后臺(tái)的單獨(dú)線程上運(yùn)行。這可以實(shí)現(xiàn)類似多線程的行為，通過從主線程卸載資源密集型任務(wù)來提高性能。

Web Workers 在不同的執(zhí)行上下文中運(yùn)行，這意味著它們無權(quán)訪問 DOM、窗口或文檔對(duì)象。但是，它們可以通過消息與主線程通信。

如何使用網(wǎng)絡(luò)工作者

這是使用 Web Workers 的分步指南：

1. 創(chuàng)建工人文件 Web Workers 需要一個(gè)單獨(dú)的 JavaScript 文件，其中包含要在后臺(tái)執(zhí)行的代碼。例如，創(chuàng)建一個(gè)名為worker.js的文件：

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    const result = performHeavyComputation(data);
    self.postMessage(result);
};

function performHeavyComputation(input) {
    // Simulate a CPU-intensive task
    let total = 0;
    for (let i = 0; i < 1e7; i++) {
        total += i * input;
    }
    return total;
}

1. 在主線程初始化Worker 使用 Worker 構(gòu)造函數(shù)在主腳本中創(chuàng)建 Worker 的實(shí)例：

// main.js
const worker = new Worker('worker.js');

// Send data to the worker
worker.postMessage(42);

// Receive data from the worker
worker.onmessage = function(event) {
    console.log('Result from worker:', event.data);
};

// Handle errors
worker.onerror = function(error) {
    console.error('Worker error:', error.message);
};

1. 終止 Worker

當(dāng)工作人員的任務(wù)完成時(shí)，或者不再需要它時(shí)，終止它以釋放資源：

worker.terminate();

示例：對(duì)大數(shù)組進(jìn)行排序

對(duì)大數(shù)組進(jìn)行排序可能會(huì)阻塞主線程，導(dǎo)致 UI 凍結(jié)。讓我們使用 Web Worker 來處理此任務(wù)：

工作文件（sortWorker.js）：

self.onmessage = function(event) {
    const sortedArray = event.data.sort((a, b) => a - b);
    self.postMessage(sortedArray);
};

主要腳本：

const largeArray = Array.from({ length: 1e6 }, () => Math.random());
const sortWorker = new Worker('sortWorker.js');

sortWorker.postMessage(largeArray);

sortWorker.onmessage = function(event) {
    console.log('Sorted array:', event.data);
};

sortWorker.onerror = function(error) {
    console.error('Error in sorting worker:', error.message);
};

Web Workers 的一些好處

• 提高性能：將任務(wù)卸載到單獨(dú)的線程可以防止主線程被阻塞。
• 更好的用戶體驗(yàn)：即使在密集操作期間，UI 也能保持響應(yīng)。
• 可擴(kuò)展性：多個(gè)工作人員可以同時(shí)處理不同的任務(wù)。

Web Workers 開發(fā)人員面臨的限制

Web Workers 有優(yōu)點(diǎn)，但也有一些缺點(diǎn)和限制。

• No DOM Access：Workers 無法直接操作 DOM。
• 上下文隔離：Workers 有自己的全局作用域，無法訪問主線程中的變量或函數(shù)。
• 開銷：創(chuàng)建工人并與工人溝通是有成本的，使他們不適合非常小的任務(wù)。

網(wǎng)絡(luò)工作者的結(jié)論

Web Workers 讓您可以在后臺(tái)運(yùn)行繁重的任務(wù)，讓 JavaScript 感覺就像有多個(gè)線程。通過學(xué)習(xí)如何有效地使用它們，您可以開發(fā)更快、響應(yīng)更靈敏的 Web 應(yīng)用程序。

對(duì)于需要更高級(jí)線程功能的場(chǎng)景，請(qǐng)考慮共享 Workers 或 Worklet 等選項(xiàng)，它們擴(kuò)展了 Web Worker 模型。通過正確使用 Web Workers，您可以顯著提高 JavaScript 應(yīng)用程序的性能和響應(yīng)能力。

以上是JavaScript 中用于多線程的 Web Workers的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！