Web Workers
🧠 Web Workers 多线程处理指南 🧠
🔄 Web Workers 工作原理
⚡ 核心概念与通信流程
📝 基本代码模板
主线程:
// ⭐ 创建 worker
const worker = new Worker('worker.js');// 发送数据
worker.postMessage({data: '需要处理的数据'});// ⭐ 接收结果
worker.onmessage = function(e) {console.log('处理结果:', e.data);
};// ⭐ 错误处理
worker.onerror = function(error) {console.error('出错了:', error.message);
};
Worker文件 (worker.js):
// ⭐ 接收主线程数据
self.onmessage = function(e) {const receivedData = e.data;// 执行复杂计算const result = doHeavyWork(receivedData);// ⭐ 发送结果回主线程self.postMessage(result);
};
🎯 Web Workers 适用场景
⚠️ 限制与注意事项
| 限制 | 描述 |
|---|---|
| 🚫 无 DOM 访问 | Worker 不能直接访问 DOM 或使用 document、window 对象 |
| 🔄 通信成本 | 数据在线程间传递需要序列化和反序列化，大数据可能影响性能 |
| 📱 兼容性 | 检查目标浏览器是否支持 Web Workers |
| 🧩 作用域隔离 | Worker 有自己的全局作用域，不能直接访问主线程变量 |
| 💾 资源消耗 | 每个 Worker 会消耗额外内存，不宜创建过多 |
🚀 使用流程示例
💡 实用技巧
-
🔍 可转移对象 (Transferable Objects)：
// ⭐ 高效传输大型二进制数据，不会复制 const buffer = new ArrayBuffer(1024 * 1024 * 32); // 32MB worker.postMessage({ data: buffer }, [buffer]); // 第二个参数为可转移对象列表 -
🧵 Worker 池管理：
// ⭐ 创建Worker池避免频繁创建/销毁 class WorkerPool {constructor(size, scriptURL) {this.workers = [];this.queue = [];for (let i = 0; i < size; i++) {this.workers.push(new Worker(scriptURL));}}// ...任务分配逻辑 } -
🔄 共享内存通信：
// ⭐ 使用SharedArrayBuffer在线程间共享内存 const sharedBuffer = new SharedArrayBuffer(1024); worker.postMessage({ buffer: sharedBuffer }); // 使用Atomics API确保数据同步
🎨 实际应用示例
📚 高级应用场景
- 🔒 密码学计算：哈希生成、加密算法
- 📊 实时数据图表计算：不阻塞UI的数据分析
- 🎮 游戏物理引擎：碰撞检测、物理模拟
- 🤖 机器学习：小型推理模型执行
- 📡 后台同步和数据处理：大型JSON处理、数据转换
🔑 记住的关键点
- Web Workers 运行在独立线程，不会阻塞UI
- 使用 postMessage 进行通信，注意数据量
- 不能直接操作DOM，结果必须发回主线程
- 适合CPU密集型任务，不适合IO密集型任务
- 每个worker有独立内存空间，注意资源消耗
💪 挑战自己：尝试在实际项目中识别可以移至Worker的耗时计算，比较优化前后的性能差异!