高效Web Worker通信需减少开销：优先用transferable objects实现零拷贝；高频场景用MessageChannel拆通道；避免重复传大对象、频繁发中间结果、不清理监听器或不关闭Worker。
Web Worker 与主线程通信本身不难，但“高效”关键在于减少开销、避免误用。结构化克隆（structured clone）是默认机制，但它会深度复制整个对象——数据越大、嵌套越深，序列化/反序列化耗时越长，尤其在高频或大数据量场景下，性能损耗明显。
用好 postMessage + onmessage 是基础
这是最标准的通信方式，适合大多数中低频任务：
- 主线程发消息：直接调用 worker.postMessage(data)，data 可以是普通对象、数组、数字、字符串，甚至 ArrayBuffer、TypedArray、Blob 等可转移对象
- Worker 接收：在 worker.js 中用 self.onmessage 或 self.addEventListener('message', ...)
- Worker 回传：用 self.postMessage(result)，主线程通过 worker.onmessage 捕获
- 注意：函数、DOM 节点、window/document 实例等不可序列化对象不能传；传错会静默失败或报错
大数据传输优先用 transferable objects
当要传递大量二进制数据（如图像像素、音频缓冲、大 JSON 解析结果），别走结构化克隆的老路。用 ArrayBuffer 配合 transfer list，实现零拷贝：
- 主线程发送时：worker.postMessage(arrayBuffer, [arrayBuffer]) —— 第二个参数是需转移的 ArrayBuffer 列表
- 发送后，主线程的 arrayBuffer 自动变为 detached（不可再访问），内存控制权交给 Worker
- Worker 收到后可直接操作，无需复制，大幅降低内存和时间开销
- 常见适用场景：Canvas 图像处理、WebGL 数据上传、大文件分块解析
高频小消息建议用 MessageChannel 拆通道
如果一个 Worker 需要频繁双向通信（比如实时音视频帧处理、游戏物理模拟反馈），单靠 worker.postMessage 容易堆积消息、触发主线程调度压力。这时可用 MessageChannel 创建独立通信通道：
- 主线程创建：const channel = new MessageChannel()，它包含 port1 和 port2
- 把 channel.port2 传给 Worker：worker.postMessage(null, [channel.port2])
- 主线程监听 port1：channel.port1.onmessage = ...，Worker 监听收到的 port：self.onmessage = e => { const port = e.ports[0]; port.onmessage = ... }
- 优势：通道独占、低延迟、可复用；避免与主 worker 消息混杂，也绕开了全局 postMessage 的队列竞争
避免常见低效做法
有些写法看似方便，实则埋下性能隐患：
- 反复传整个大对象（如含 10 万条记录的数组），而不是只传必要字段或 ID 列表
- 在 Worker 里频繁调用 postMessage 发送中间结果（例如每计算一条就回传），应聚合后批量返回
- 主线程未及时清理 onmessage 监听器，导致闭包驻留或重复绑定
- Worker 执行完任务却不主动 self.close()，长期空转占用内存
通信不是越勤快越好，而是够用、精准、可控。理清数据流边界，选对传输方式，Worker 才真能成为主线程的得力协作者，而不是新瓶颈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
