"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，传递大型数据时可迁移所有权，降低复制开销。

示例

// 主线程
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 示例

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