Web Worker 是浏览器中实现 JavaScript 多线程的唯一标准机制，通过 postMessage/onmessage 异步通信，支持结构化克隆与 transferable 对象优化，需注意错误处理、生命周期管理和 MessageChannel 进阶用法。
Web Worker 是浏览器中实现 JavaScript 多线程的唯一标准机制，它让耗时任务脱离主线程运行，避免阻塞 UI 渲染和用户交互。Worker 与主线程之间不能直接共享内存，必须通过 异步消息传递（postMessage + onmessage）通信，这是设计核心，也是易出错的关键点。
Worker 的创建与基本通信流程
主线程用 new Worker('worker.js') 启动独立执行环境；Worker 脚本中通过 self.onmessage 接收消息，用 self.postMessage() 发送响应。双方都需监听 message 事件，且所有数据都会被结构化克隆（structured clone），不支持函数、DOM 节点或循环引用。
- 主线程发送：worker.postMessage({type: 'calculate', data: [1,2,3,4]})
- Worker 接收并处理后回复：self.postMessage({type: 'result', value: 10})
- 主线程用
worker.onmessage捕获响应，更新 UI 或继续后续逻辑
传递复杂数据的注意事项
结构化克隆虽方便，但对大型数组、TypedArray、ImageBitmap 等支持较好，对 Date、RegExp、Map、Set 也兼容，但不复制原型链和方法。若需传对象且保留部分行为，应提前序列化为纯数据（如 JSON 可表示的字段），或使用 transferable 对象提升性能。
- 高频传输大数组时，用
postMessage(data, [data.buffer])将 ArrayBuffer 所有权转移，避免拷贝开销 - 传递 ImageBitmap 可直接用于 Canvas 绘图，无需重新解码
- 避免在消息中传入 class 实例或带闭包的对象，接收端只会得到“空壳”普通对象
错误处理与生命周期管理
Worker 内部抛出未捕获异常不会影响主线程，但会导致 Worker 静默终止。需主动监听 error 事件，并在主线程中处理 Worker 崩溃场景。
立即学习“Java免费学习笔记（深入）”；
- 主线程监听：
worker.onerror = e => console.error('Worker failed:', e.message) - Worker 自身可监听：
self.addEventListener('error', e => { e.preventDefault(); self.postMessage({error: e.message}); }) - 任务结束应及时调用
self.close()，主线程可用worker.terminate()强制销毁，防止内存泄漏
进阶：使用 MessageChannel 实现多端通信
单个 Worker 默认只与创建它的主线程通信。若需多个脚本（如不同模块或 iframe）与同一 Worker 交互，或 Worker 需主动发起通信，可用 MessageChannel 创建独立通道。
- 主线程创建 channel：
const {port1, port2} = new MessageChannel()，将port2传给 Worker - Worker 收到 port 后调用
port.start()并监听message事件 - 主线程用
port1.postMessage()发送，实现更灵活的双向通信拓扑
