前言
Web Worker 是一種運行在主線程之外的 JavaScript 并行執行環境。通過 Web Worker，開發者可以將耗時的任務（如數據處理、文件解析等）從主線程中剝離，從而提高頁面的響應速度和用戶體驗。
Web Worker API 方法詳解
創建 Worker
使用Worker 構造函數創建一個新的 Worker 實例。
const worker = new Worker('worker.js');
參數是包含 Worker 腳本的文件路徑。需要注意的是，文件必須與主線程在同源下運行。
發送消息到 Worker
主線程使用postMessage 方法向 Worker 發送消息。
worker.postMessage('Hello, Worker!');
發送的數據可以是任何可序列化的對象，例如字符串、數字、數組或 JSON 對象。
Worker 接收消息
Worker 使用onmessage 事件監聽消息。
self.onmessage = function(event) {
console.log('Message from Main Thread:', event.data);
};
event.data 包含主線程發送的數據。
Worker 向主線程發送消息
Worker 使用postMessage 方法將消息發送回主線程。
javascript
代碼解讀
復制代碼
self.postMessage('Hello, Main Thread!');
主線程接收 Worker 消息
主線程通過onmessage 事件接收 Worker 返回的數據。
worker.onmessage = function(event) {
console.log('Message from Worker:', event.data);
};
捕獲錯誤
主線程可以通過onerror 捕獲 Worker 拋出的錯誤。
worker.onerror = function(error) {
console.error('Worker error:', error.message);
};
在 Worker 內部可以通過throw 拋出錯誤：
throw new Error('Something went wrong');
終止 Worker
使用terminate 方法可以立即終止 Worker。
worker.terminate();
終止后，Worker 將停止執行所有任務。
Worker 內部全局對象
在 Worker 內部，全局對象是self，與主線程中的window 不同。常用的方法包括：
self.close()：關閉當前 Worker。self.importScripts(...urls)：動態加載一個或多個腳本。
self.importScripts('script1.js', 'script2.js');
代碼示例
以下是一個簡單的示例，演示如何使用 Web Worker 計算大數階乘。
主線程代碼
const worker = new Worker('factorialWorker.js');
worker.postMessage(10); // 計算 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);
}
實際運用場景舉例
場景 1：文件解析與處理
在處理大型文件（如 CSV、JSON 或圖像）時，使用 Web Worker 可以將解析任務移至后臺，從而避免主線程阻塞。
示例代碼
主線程代碼：
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;
}, {});
});
}
場景 2：復雜計算
例如，進行復雜的數學計算或圖像處理時，Web Worker 可以顯著提高性能。
示例代碼
主線程代碼：
const calcWorker = new Worker('matrixWorker.js');
// 模擬兩個矩陣數據
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;
}
總結
Web Worker 是一種強大的工具，可以顯著提升 Web 應用的性能和響應速度。通過合理使用 Worker，將耗時任務從主線程中剝離，開發者可以構建更流暢、更高效的用戶體驗。在實際開發中，需要權衡 Worker 的開銷和收益，確保性能優化的同時控制資源消耗。
400 186 1886
