MessageChannel 是提供两个隔离 MessagePort 实例的双向通信机制，相比 postMessage 可避免消息队列竞争、支持零拷贝传输、实现端口专属与复用。
MessageChannel 是什么，为什么不用 postMessage 直接通信
MessageChannel 提供两个隔离的 MessagePort 实例（port1 和 port2），它们组成一条单向通道——但成对使用就能构成双向、独立、低干扰的通信链路。相比直接对 Worker 调用 worker.postMessage()，它避免了主线程与 Worker 共享同一消息队列可能引发的竞态或混淆，尤其适合高频、多模块并发通信场景。
- 主线程发给 Worker 的消息不会和 Worker 主动上报的状态更新“挤”在同一个事件循环里
- 每个
MessageChannel实例互不干扰，可为不同功能（如渲染控制、数据预处理）分配专属端口 -
port.postMessage()支持结构化克隆 +Transferable对象（如ArrayBuffer），零拷贝传输大数组更高效
初始化 MessageChannel 并把 port2 传给 Worker
Worker 不能自己创建 MessageChannel（构造函数在 Worker 环境不可用），必须由主线程创建并显式传递一个端口过去。
主线程侧：
const channel = new MessageChannel();
const worker = new Worker('./processor.js');
<p>// 把 port2 传给 Worker，注意 transfer: [channel.port2]
worker.postMessage({ type: 'INIT_PORT' }, [channel.port2]);</p><p>// 主线程监听 port1
channel.port1.onmessage = (e) => {
console.log('收到 Worker 消息：', e.data);
};
channel.port1.start(); // 必须调用 start() 才能接收消息
</p>
Worker 侧（processor.js）：
let workerPort;
<p>self.onmessage = (e) => {
if (e.data.type === 'INIT_PORT') {
// 接收主线程传来的 port2
workerPort = e.ports[0];
workerPort.onmessage = (e) => {
console.log('Worker 收到主线程消息：', e.data);
// 回复时也走同一 port
workerPort.postMessage({ result: 'done' });
};
workerPort.start();
}
};
</p>
⚠️ 容易踩的坑：
- 忘记在两端都调用
port.start()：不调用就收不到任何message事件 - 传错 port：主线程应传
channel.port2，Worker 收到后只能用它通信，不能再用self.postMessage - 多次传同一个 port：
postMessage(..., [port])会将 port 移出当前上下文，传第二次会报DataCloneError
如何安全地复用 MessagePort 处理多次请求
MessagePort 是持久连接，不是一次性的。只要没 close()，就能反复收发。适合封装成请求响应模式：
主线程封装示例：
function sendToWorker(data) {
return new Promise((resolve) => {
const msgId = Date.now() + '-' + Math.random().toString(36).substr(2, 9);
channel.port1.postMessage({ id: msgId, data });
<pre class="brush:php;toolbar:false;">const onReply = (e) => {
if (e.data.id === msgId) {
resolve(e.data.payload);
channel.port1.removeEventListener('message', onReply);
}
};
channel.port1.addEventListener('message', onReply);}); }
// 使用 sendToWorker({ action: 'filter', array: hugeList }) .then(result => console.log(result));
Worker 响应逻辑需带上 id 回传：
workerPort.onmessage = (e) => {
const { id, data } = e.data;
const result = process(data); // 实际处理逻辑
workerPort.postMessage({ id, payload: result });
};
⚠️ 注意点：
- 不要用全局变量存 pending promise，每个请求应绑定独立的事件监听器或用
Map管理 id → resolve 映射 - 若 Worker 可能被多次
postMessage初始化，要防重复绑定onmessage -
MessagePort不支持await自动等待，必须手动 Promise 化
关闭端口和清理资源的时机
MessagePort 不会随 Worker 销毁自动关闭，不手动 close() 可能导致内存泄漏或静默失败。
- 主线程应在 Worker 终止前调用
channel.port1.close()；若 Worker 已terminate()，再调port1.close()无害，但继续发消息会抛InvalidStateError - Worker 应在
self.close()前调workerPort.close()，否则主线程的port1可能卡在 “waiting for close” 状态 - 若使用
addEventListener绑定消息，记得在close()前移除监听器，避免引用残留
真正容易被忽略的是：跨 iframe 或多个 Worker 共享同一 MessageChannel 时，任意一方 close() 都会使整条通道失效——这不是“断连重试”的问题，而是通道彻底销毁，必须重建。
