Web Worker 与主线程通过异步消息传递通信，使用 postMessage 发送、onmessage 接收，数据经结构化克隆或 ArrayBuffer 零拷贝传输；Worker 无 DOM 访问权限，适用于纯计算任务，需手动管理生命周期与错误。
Web Worker 和主线程通信的核心是异步消息传递，不共享内存、不直接调用函数，而是靠 postMessage 发送数据、onmessage 接收数据。只要理解这个机制，就能真正实现无阻塞的数据处理。
创建 Worker 并启动后台任务
主线程中用 new Worker('xxx.js') 创建独立线程，路径必须同源。Worker 脚本不能访问 DOM，但可执行纯计算、解析、加密等耗时操作。
- Worker 文件（如
processor.js）需单独保存为 JS 文件，不能是内联脚本 - 主线程创建后立即可发消息，无需等待 Worker 完全加载完成
- 若 Worker 加载失败（如 404），会触发
worker.onerror，建议监听处理
双向消息通信的写法要点
主线程和 Worker 各自使用 postMessage 发送、onmessage 接收，数据自动序列化（结构化克隆），支持普通对象、数组、Date、RegExp 等，也支持 ArrayBuffer 零拷贝传输（用 transfer 参数）。
- 主线程发送：
worker.postMessage({ type: 'sort', data: hugeArray }) - 主线程接收：
worker.onmessage = e => { console.log(e.data) } - Worker 内接收：
self.onmessage = e => { /* 处理 e.data */ } - Worker 返回结果：
self.postMessage(result)，不可返回 Promise 或函数
常见数据处理场景示例
比如对十万条订单做排序+过滤，放在主线程会卡顿 300ms 以上；移到 Worker 后，UI 始终响应流畅。
- Worker 中避免任何 DOM 操作、
console.log（可用self.console.log，但建议仅调试时开） - 复杂逻辑可拆成多个子任务，用多次
postMessage分批返回进度（如{ progress: 65, partialResult: [...] }） - 大数据量传输前，考虑用
Uint8Array或ArrayBuffer+transfer提升效率，避免重复拷贝
生命周期与错误管理
Worker 运行完不会自动销毁，长期空闲可能浪费资源；出错也不会中断主线程，但需主动捕获排查。
- 主线程可调用
worker.terminate()主动关闭，Worker 内可用self.close() - 监听
worker.onerror获取报错堆栈，注意它不捕获self.onmessage内未 try/catch 的异常 - Worker 内推荐统一包裹逻辑：用
try...catch捕获计算错误，并self.postMessage({ error: msg })通知主线程
