工作者线程通信方式对比（ postMessage()、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();