MessageChannel 无法直接建立两个独立 iframe 之间的高频异步二进制数据传输通道，因浏览器禁止跨 iframe 传递 MessagePort 实例，尤其在非同源、无父子关系或 sandbox 限制下，port 对象无法送达且会触发 DataCloneError 或静默丢弃。
MessageChannel 无法直接建立两个独立 iframe 之间的高频异步二进制数据传输通道——因为浏览器禁止跨 iframe 直接传递 MessagePort 实例，尤其当它们彼此不可访问（如非同源、无父子关系、或被 sandbox 限制）时，port 对象根本无法送达。
为什么“两个独立 iframe”无法直连
独立 iframe 指没有直接父子关系的 iframe（例如：iframe-A 和 iframe-B 同时嵌在父页中，但互不知晓对方存在；或分别位于不同页面、跨域环境）。这种场景下：
- iframe-A 无法获取 iframe-B 的
contentWindow，因此不能调用postMessage(..., [port])向其传入 port - 即使同源，
postMessage(port, targetOrigin, [port])也会触发DataCloneError：MessagePort 不可序列化，也不能跨上下文“复制”，只能由创建方显式转移 - 浏览器会静默丢弃跨 iframe 边界的 port 传递请求，控制台报错：
Failed to execute 'postMessage' on 'MessagePort': Cannot send a MessagePort to a different origin（即使同源，若未满足严格同源三要素，同样失败）
真正可行的通信路径：必须经由共享上下文中转
要让两个独立 iframe 实现高频、低延迟、支持二进制（ArrayBuffer/TypedArray）的双向通信，唯一合规方式是引入一个双方都可安全通信的“可信中介”——通常是它们共同的父页面（top window）。
- 父页创建
new MessageChannel()，得到port1和port2 - 父页分别将
port1发送给 iframe-A、port2发送给 iframe-B（使用iframeA.contentWindow.postMessage(..., [port1])） - 双方 iframe 收到 port 后立即调用
port.start()并绑定onmessage，即可开始用port.postMessage(data, [transferList])发送 ArrayBuffer 等 transferable 对象 - 所有消息都走该 channel，无需重复序列化，支持零拷贝传输，天然适配高频二进制同步（如实时音视频帧、传感器采样流）
高频场景下的关键加固措施
仅靠 MessageChannel 不足以保障稳定。需配合以下实践防堆积、防丢帧、防阻塞：
-
发送端节流：对连续数据（如每 16ms 一帧），用
requestIdleCallback或setTimeout(..., 0)控制最小间隔，避免突发压垮事件循环 - 接收端去重：维护时间窗口计数器（如 100ms 内同类型消息 >5 条），自动丢弃中间旧帧，只处理最新一条
-
二进制传输规范：发送前明确标注
type、timestamp、byteLength，接收方校验data instanceof ArrayBuffer和长度边界，防止解析异常中断监听 -
端口生命周期管理：iframe 卸载前调用
port.close()；父页监听iframe.onload和iframe.onerror，异常时主动清理 channel，避免内存泄漏
不适用 MessageChannel 的典型误判场景
以下情况请果断放弃 MessageChannel，改用 postMessage + 协议增强：
- iframe-B 是跨域的（如广告位、第三方地图），父页无法向其传递 port（浏览器直接拦截）
- iframe 被设置了
sandbox="allow-scripts"但未加allow-same-origin，导致无法接收或启用 port - 需要三方以上协同（A↔B↔C），MessageChannel 成对独占，扩展性差；此时应统一走父页消息总线 + 序列号+ACK机制
- 传输数据非纯二进制，而是含大量嵌套对象或函数引用——MessageChannel 仍依赖结构化克隆，此时性能优势消失，不如裸 postMessage 清晰
