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

概述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/MessageChannelMDN postMessage 文档：https://developer.mozilla.org/docs/Web/API/Worker/postMessageweb.dev 并发传输指南：https://web.dev/articles/offscreen-canvas