、MessageChannel、BroadcastChannel）)
工作者线程通信方式对比
| 特性 | postMessage() | MessageChannel | BroadcastChannel |
|---|---|---|---|
| 通信模式 | 点对点（直接通信） | 点对点（通道通信） | 一对多（广播通信） |
| 通信方向 | 单向（发送到特定接收方） | 双向（通过端口相互通信） | 单向广播（发送给所有订阅者） |
| 创建方式 | 内置于Worker、Window、iframe等对象 | 通过new MessageChannel()创建 | 通过new BroadcastChannel(name)创建 |
| 主要用途 | 与特定工作者或窗口通信 | 两个上下文之间的专用通道 | 同源下的多个上下文间广播消息 |
| 连接建立 | 隐式（通过目标对象的引用） | 显式（通过传递端口） | 隐式（通过共享频道名称） |
| 消息路由 | 直接发送到目标对象 | 通过port1和port2端口 | 发送到所有同名的频道订阅者 |
| 典型应用场景 | 主线程与 Worker 通信 | 两个 Worker 之间直接通信 | 多个标签页或窗口间同步状态 |
| 关闭方式 | 无法单独关闭通信，需终止工作者 | 可关闭单个端口或整个通道 | 关闭频道或关闭上下文 |
| 兼容性 | 广泛支持（包括 IE10+） | 广泛支持（包括 IE10+） | 现代浏览器（IE不支持） |
| 消息事件监听 | onmessage或addEventListener('message', ...) | port.onmessage或addEventListener('message', ...) | onmessage或addEventListener('message', ...) |
| 传递机制 | 结构化克隆算法（支持大多数数据类型） | 结构化克隆算法 | 结构化克隆算法 |
| 性能特点 | 直接高效，适合固定通信对 | 适合需要双向通信的专用链路 | 广播开销较大，适合低频同步 |
使用示例
1.postMessage()
javascript
// 主线程 const worker = new Worker('worker.js'); worker.postMessage('Hello Worker'); // Worker 线程 self.onmessage = (e) => { console.log(e.data); // 'Hello Worker' self.postMessage('Hello Main'); };2.MessageChannel
javascript
// 创建通道 const channel = new MessageChannel(); // 端口1监听 channel.port1.onmessage = (e) => { console.log('Port1 received:', e.data); }; // 通过端口2发送 channel.port2.postMessage('Hello through channel'); // 可将端口传递给其他工作者 worker.postMessage({ port: channel.port2 }, [channel.port2]);3.BroadcastChannel
javascript
// 所有需要通信的上下文 const channel = new BroadcastChannel('app-channel'); // 发送广播 channel.postMessage({ type: 'update', data: 'new data' }); // 接收广播 channel.onmessage = (e) => { console.log('Received:', e.data); }; // 关闭 channel.close();选择建议
使用
postMessage()：当需要与特定的工作者、窗口或 iframe 进行直接通信时使用
MessageChannel：当需要两个上下文之间建立专用的双向通信通道时使用
BroadcastChannel：当需要在同源下的多个上下文（标签页、工作者等）之间广播消息时
这三种方式可以结合使用，例如通过postMessage()传递MessageChannel的端口，实现在不同工作者之间建立直接通信通道。
