前言
Web Worker 是一種運(yùn)行在主線程之外的 JavaScript 并行執(zhí)行環(huán)境。通過 Web Worker，開發(fā)者可以將耗時(shí)的任務(wù)（如數(shù)據(jù)處理、文件解析等）從主線程中剝離，從而提高頁面的響應(yīng)速度和用戶體驗(yàn)。
Web Worker API 方法詳解
創(chuàng)建 Worker
使用Worker 構(gòu)造函數(shù)創(chuàng)建一個(gè)新的 Worker 實(shí)例。
const worker = new Worker('worker.js');
參數(shù)是包含 Worker 腳本的文件路徑。需要注意的是，文件必須與主線程在同源下運(yùn)行。
發(fā)送消息到 Worker
主線程使用postMessage 方法向 Worker 發(fā)送消息。
worker.postMessage('Hello, Worker!');
發(fā)送的數(shù)據(jù)可以是任何可序列化的對(duì)象，例如字符串、數(shù)字、數(shù)組或 JSON 對(duì)象。
Worker 接收消息
Worker 使用onmessage 事件監(jiān)聽消息。
self.onmessage = function(event) {
console.log('Message from Main Thread:', event.data);
};
event.data 包含主線程發(fā)送的數(shù)據(jù)。
Worker 向主線程發(fā)送消息
Worker 使用postMessage 方法將消息發(fā)送回主線程。
javascript
代碼解讀
復(fù)制代碼
self.postMessage('Hello, Main Thread!');
主線程接收 Worker 消息
主線程通過onmessage 事件接收 Worker 返回的數(shù)據(jù)。
worker.onmessage = function(event) {
console.log('Message from Worker:', event.data);
};
捕獲錯(cuò)誤
主線程可以通過onerror 捕獲 Worker 拋出的錯(cuò)誤。
worker.onerror = function(error) {
console.error('Worker error:', error.message);
};
在 Worker 內(nèi)部可以通過throw 拋出錯(cuò)誤：
throw new Error('Something went wrong');
終止 Worker
使用terminate 方法可以立即終止 Worker。
worker.terminate();
終止后，Worker 將停止執(zhí)行所有任務(wù)。
Worker 內(nèi)部全局對(duì)象
在 Worker 內(nèi)部，全局對(duì)象是self，與主線程中的window 不同。常用的方法包括：
self.close()：關(guān)閉當(dāng)前 Worker。self.importScripts(...urls)：動(dòng)態(tài)加載一個(gè)或多個(gè)腳本。
self.importScripts('script1.js', 'script2.js');
代碼示例
以下是一個(gè)簡(jiǎn)單的示例，演示如何使用 Web Worker 計(jì)算大數(shù)階乘。
主線程代碼
const worker = new Worker('factorialWorker.js');
worker.postMessage(10); // 計(jì)算 10 的階乘
worker.onmessage = function(event) {
console.log('Factorial result:', event.data);
};
worker.onerror = function(error) {
console.error('Worker error:', error.message);
};
Worker 腳本 (factorialWorker.js)
self.onmessage = function(event) {
const number = event.data;
const result = factorial(number);
self.postMessage(result);
};
function factorial(n) {
if (n === 0 || n === 1) return 1;
return n * factorial(n - 1);
}
實(shí)際運(yùn)用場(chǎng)景舉例
場(chǎng)景 1：文件解析與處理
在處理大型文件（如 CSV、JSON 或圖像）時(shí)，使用 Web Worker 可以將解析任務(wù)移至后臺(tái)，從而避免主線程阻塞。
示例代碼
主線程代碼：
const fileWorker = new Worker('fileWorker.js');
// 模擬上傳文件并傳遞給 Worker
const fileContent = 'name,age\nAlice,30\nBob,25';
fileWorker.postMessage(fileContent);
fileWorker.onmessage = function(event) {
console.log('Parsed Data:', event.data);
};
Worker 腳本 (fileWorker.js)：
self.onmessage = function(event) {
const csvData = event.data;
const parsedData = parseCSV(csvData);
self.postMessage(parsedData);
};
function parseCSV(data) {
const rows = data.split('\n');
const headers = rows[0].split(',');
return rows.slice(1).map(row => {
const values = row.split(',');
return headers.reduce((obj, header, index) => {
obj[header] = values[index];
return obj;
}, {});
});
}
場(chǎng)景 2：復(fù)雜計(jì)算
例如，進(jìn)行復(fù)雜的數(shù)學(xué)計(jì)算或圖像處理時(shí)，Web Worker 可以顯著提高性能。
示例代碼
主線程代碼：
const calcWorker = new Worker('matrixWorker.js');
// 模擬兩個(gè)矩陣數(shù)據(jù)
const matrixA = [[1, 2], [3, 4]];
const matrixB = [[5, 6], [7, 8]];
calcWorker.postMessage({ matrixA, matrixB });
calcWorker.onmessage = function(event) {
console.log('Matrix Multiplication Result:', event.data);
};
Worker 腳本 (matrixWorker.js)：
self.onmessage = function(event) {
const { matrixA, matrixB } = event.data;
const result = multiplyMatrices(matrixA, matrixB);
self.postMessage(result);
};
function multiplyMatrices(a, b) {
const rowsA = a.length, colsA = a[0].length;
const rowsB = b.length, colsB = b[0].length;
if (colsA !== rowsB) throw new Error('Matrix dimensions do not match');
const result = Array.from({ length: rowsA }, () => Array(colsB).fill(0));
for (let i = 0; i < rowsA; i++) {
for (let j = 0; j < colsB; j++) {
for (let k = 0; k < colsA; k++) {
result[i][j] += a[i][k] * b[k][j];
}
}
}
return result;
}
總結(jié)
Web Worker 是一種強(qiáng)大的工具，可以顯著提升 Web 應(yīng)用的性能和響應(yīng)速度。通過合理使用 Worker，將耗時(shí)任務(wù)從主線程中剝離，開發(fā)者可以構(gòu)建更流暢、更高效的用戶體驗(yàn)。在實(shí)際開發(fā)中，需要權(quán)衡 Worker 的開銷和收益，確保性能優(yōu)化的同時(shí)控制資源消耗。
400 186 1886
