Web Workers：JavaScript 的多线程编程
Web Workers：JavaScript 的多线程编程
什么是 Web Workers？
Web Workers 允许在后台线程中运行脚本，不阻塞主线程。
Web Workers 的类型
| 类型 | 说明 |
|---|---|
| Dedicated Worker | 专用 Worker，只能被创建它的脚本使用 |
| Shared Worker | 共享 Worker，可以被多个脚本使用 |
| Service Worker | 服务 Worker，用于离线缓存和推送 |
创建 Worker
// main.js const worker = new Worker('worker.js'); worker.postMessage('Hello from main'); worker.onmessage = (event) => { console.log('收到消息:', event.data); }; worker.onerror = (error) => { console.error('Worker error:', error.message); };// worker.js self.onmessage = (event) => { console.log('Worker 收到:', event.data); // 处理耗时任务 const result = heavyComputation(event.data); self.postMessage(result); }; function heavyComputation(data) { // 耗时计算 return data; }数据传递
// 传递基本类型 worker.postMessage('hello'); worker.postMessage(42); worker.postMessage(true); // 传递对象（会被序列化） worker.postMessage({ name: 'John', age: 30 }); // 传递二进制数据 const buffer = new ArrayBuffer(1024); worker.postMessage(buffer, [buffer]);终止 Worker
// 主线程中终止 worker.terminate(); // Worker 内部终止 self.close();Shared Worker
// 多个页面共享同一个 Worker const sharedWorker = new SharedWorker('shared-worker.js'); sharedWorker.port.start(); sharedWorker.port.postMessage('Hello'); sharedWorker.port.onmessage = (event) => { console.log(event.data); };实际应用场景
场景一：数据处理
// worker.js self.onmessage = (event) => { const data = event.data; // 处理大量数据 const result = data.map(item => processItem(item)); self.postMessage(result); };场景二：图像处理
// worker.js self.onmessage = (event) => { const imageData = event.data; // 图像处理 for (let i = 0; i < imageData.data.length; i += 4) { // 修改像素 imageData.data[i] = 255 - imageData.data[i]; // R imageData.data[i + 1] = 255 - imageData.data[i + 1]; // G imageData.data[i + 2] = 255 - imageData.data[i + 2]; // B } self.postMessage(imageData); };限制
const limitations = [ '不能访问 DOM', '不能使用 window 对象', '不能访问本地存储', '不能跨域加载脚本' ];最佳实践
const bestPractices = [ '用于耗时计算', '避免频繁通信', '合理使用传输对象', '处理错误和异常' ];总结
Web Workers 为 JavaScript 带来了多线程能力：
- 主线程不阻塞：提升用户体验
- 并行处理：提高计算效率
- 后台任务：处理耗时操作
- 简单易用：API 简洁明了
合理使用 Web Workers，提升应用性能。