MessageChannel 与 postMessage：双向通信与 Transferable 管线

--- title: "MessageChannel 与 postMessage：双向通信与 Transferable 管线" keywords: - MessageChannel - postMessage - MessagePort - Transferable - zero-copy description: "介绍 MessageChannel 的双端口模型与 postMessage 的跨上下文通信，用 Transferable 进行零拷贝数据传递，构建高效的 Worker/iframe 管线，提供示例与工程建议。" categories: - 应用软件 - 系统工具 --- 概述 MessageChannel 提供两个互联的端口（`port1/port2`），可在不同上下文间进行双向通信；`postMessage` 支持结构化克隆与 Transferable，传递大型数据时可迁移所有权，降低复制开销。 示例 ```js // 主线程 const { port1, port2 } = new MessageChannel() worker.postMessage({ port: port2 }, [port2]) port1.onmessage = e => console.log('from worker:', e.data) port1.postMessage({ type: 'init' }) // worker.js self.onmessage = e => { const port = e.data.port port.onmessage = ev => { if (ev.data.type === 'init') port.postMessage({ ok: true }) } } ``` Transferable 示例 ```js const buf = new ArrayBuffer(1024) port1.postMessage({ buf }, [buf]) // 迁移所有权到接收端 ``` 工程建议 - 管线设计：为高吞吐场景使用 Transferable（`ArrayBuffer/MessagePort/OffscreenCanvas`）。 - 生命周期：迁移后原上下文不可再用数据；管理好释放与错误。 - 安全：限制来源与上下文；避免泄露敏感信息。 参考与验证 - MDN MessageChannel/MessagePort 文档：https://developer.mozilla.org/docs/Web/API/MessageChannel - MDN postMessage 文档：https://developer.mozilla.org/docs/Web/API/Worker/postMessage - web.dev 并发传输指南：https://web.dev/articles/offscreen-canvas