Web Worker 技术，用于在后台线程运行 JavaScript 以避免阻塞主线程。内容涵盖核心特性、类型（Dedicated、Shared、Service）、基本使用方法及多个实际应用示例（如斐波那契数列、图片处理、批量数据）。此外还讲解了通信机制（postMessage、Transferable Objects、MessageChannel）、性能优化建议及注意事项。通过合理使用 Web Worker，可提升应用性能并改善用户体验。
在现代 Web 应用中，随着功能的日益复杂，JavaScript 单线程的特性逐渐成为性能瓶颈。当需要执行大量计算、处理复杂任务或进行密集型操作时，主线程可能会被阻塞，导致页面卡顿甚至无响应。Web Worker 的出现为这一问题提供了完美的解决方案。
Web Worker 是 HTML5 提供的一种在后台线程中运行 JavaScript 的技术。它允许开发者将耗时的任务从主线程分离出来，在独立的线程中执行，从而避免阻塞用户界面。
专用 Worker 只能被创建它的脚本使用，一对一的关系。
共享 Worker 可以被多个脚本共享，一对多的关系。
Service Worker 是一种特殊的 Worker，主要用于网络请求拦截和缓存管理，是 PWA 的核心技术。
// worker.js
self.onmessage = function(e) {
const result = heavyCalculation(e.data);
self.postMessage(result);
};
function heavyCalculation(data) {
// 执行耗时计算
let sum = 0;
for (let i = 0; i < data; i++) {
sum += i;
}
return sum;
}
// main.js
const worker = new Worker('worker.js');
// 发送数据给 Worker
worker.postMessage(1000000);
// 接收 Worker 返回的结果
worker.onmessage = function(e) {
console.log('计算结果:', e.data);
};
// 处理 Worker 错误
worker.onerror = function(e) {
console.error('Worker 错误:', e.message);
};
// 终止 Worker
worker.terminate();
// fibonacci-worker.js
self.onmessage = function(e) {
const n = e.data;
const result = fibonacci(n);
self.postMessage(result);
};
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
// main.js
const fibonacciWorker = new Worker('fibonacci-worker.js');
fibonacciWorker.onmessage = function(e) {
console.log(`斐波那契数列第 ${e.data} 项是: ${e.data}`);
};
const n = 40;
fibonacciWorker.postMessage(n);
// image-processor-worker.js
self.onmessage = function(e) {
const imageData = e.data;
const processedData = processImage(imageData);
self.postMessage(processedData, [processedData.data.buffer]);
};
function processImage(imageData) {
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
// 灰度化处理
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // R
data[i + 1] = avg; // G
data[i + 2] = avg; // B
}
return imageData;
}
// main.js
const imageWorker = new Worker('image-processor-worker.js');
function processImage(imageElement) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = imageElement.width;
canvas.height = imageElement.height;
ctx.drawImage(imageElement, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
imageWorker.onmessage = function(e) {
ctx.putImageData(e.data, 0, 0);
imageElement.src = canvas.toDataURL();
};
imageWorker.postMessage(imageData, [imageData.data.buffer]);
}
// data-processor-worker.js
self.onmessage = function(e) {
const { data, operation } = e.data;
const result = processData(data, operation);
self.postMessage(result);
};
function processData(data, operation) {
switch (operation) {
case 'filter':
return data.filter(item => item.value > 100);
case 'sort':
return [...data].sort((a, b) => a.value - b.value);
case 'aggregate':
return data.reduce((acc, item) => acc + item.value, 0);
default:
return data;
}
}
// main.js
const dataWorker = new Worker('data-processor-worker.js');
function processLargeDataset(data, operation) {
return new Promise((resolve) => {
dataWorker.onmessage = function(e) {
resolve(e.data);
};
dataWorker.postMessage({ data, operation });
});
}
// 使用示例
const largeDataset = generateLargeDataset(100000);
processLargeDataset(largeDataset, 'filter').then(result => console.log('过滤结果:', result));
processLargeDataset(largeDataset, 'sort').then(result => console.log('排序结果:', result));
// analytics-worker.js
let dataBuffer = [];
let analysisInterval;
self.onmessage = function(e) {
switch (e.data.type) {
case 'start':
startAnalysis(e.data.interval);
break;
case 'stop':
stopAnalysis();
break;
case 'data':
dataBuffer.push(e.data.value);
break;
}
};
function startAnalysis(interval) {
analysisInterval = setInterval(() => {
const analysis = analyzeData(dataBuffer);
self.postMessage({ type: 'analysis', data: analysis });
dataBuffer = [];
}, interval);
}
function stopAnalysis() {
clearInterval(analysisInterval);
}
function analyzeData(data) {
return {
count: data.length,
average: data.reduce((a, b) => a + b, 0) / data.length,
max: Math.max(...data),
min: Math.min(...data)
};
}
// websocket-worker.js
let ws;
let reconnectAttempts = 0;
const MAX_RECONNECT_ATTEMPTS = 5;
self.onmessage = function(e) {
const { type, url, message } = e.data;
switch (type) {
case 'connect':
connect(url);
break;
case 'send':
send(message);
break;
case 'disconnect':
disconnect();
break;
}
};
function connect(url) {
ws = new WebSocket(url);
ws.onopen = function() {
reconnectAttempts = 0;
self.postMessage({ type: 'connected' });
};
ws.onmessage = function(e) {
self.postMessage({ type: 'message', data: e.data });
};
ws.onclose = function() {
self.postMessage({ type: 'disconnected' });
if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
setTimeout(() => {
reconnectAttempts++;
connect(url);
}, 1000 * reconnectAttempts);
}
};
ws.onerror = function(error) {
self.postMessage({ type: 'error', error: error.message });
};
}
function send(message) {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(message);
}
}
function disconnect() {
if (ws) {
ws.close();
}
}
// file-processor-worker.js
self.importScripts('https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js');
self.onmessage = function(e) {
const { file, type } = e.data;
switch (type) {
case 'parseCSV':
parseCSV(file);
break;
case 'processJSON':
processJSON(file);
break;
}
};
function parseCSV(file) {
Papa.parse(file, {
worker: true,
step: function(row) {
self.postMessage({ type: 'row', data: row.data });
},
complete: function() {
self.postMessage({ type: 'complete' });
},
error: function(error) {
self.postMessage({ type: 'error', error: error.message });
}
});
}
function processJSON(file) {
const reader = new FileReader();
reader.onload = function(e) {
try {
const data = JSON.parse(e.target.result);
const processed = processData(data);
self.postMessage({ type: 'result', data: processed });
} catch (error) {
self.postMessage({ type: 'error', error: error.message });
}
};
reader.readAsText(file);
}
// 主线程
worker.postMessage({ type: 'task', data: { value: 100 } });
// Worker
self.onmessage = function(e) {
const { type, data } = e.data;
// 处理消息
};
// 主线程
const buffer = new ArrayBuffer(1024);
worker.postMessage(buffer, [buffer]);
// Worker
self.onmessage = function(e) {
const buffer = e.data;
// 使用 buffer
};
// 主线程
const channel = new MessageChannel();
worker.postMessage({ port: channel.port2 }, [channel.port2]);
channel.port1.onmessage = function(e) {
console.log('收到消息:', e.data);
};
// Worker
self.onmessage = function(e) {
const port = e.data.port;
port.onmessage = function(e) {
console.log('收到消息:', e.data);
port.postMessage('回复消息');
};
};
Web Worker 为 JavaScript 带来了真正的多线程能力，使我们能够在 Web 应用中高效地处理复杂任务和大量数据。通过合理使用 Web Worker，我们可以显著提升应用性能、改善用户体验、实现更复杂的功能并构建更高效的应用程序。掌握 Web Worker 的使用，将使你的前端开发技能更上一层楼，为构建高性能的 Web 应用奠定坚实基础。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online