MessageChannel需同源调用且端口必须显式启动：跨域时虽可创建但消息被静默丢弃；port.postMessage后须调用port.start()或设置onmessage；port1与port2须分发给双方；传输大数据应使用transfer列表实现零拷贝。
MessageChannel 构造函数必须在同源上下文中调用
跨域 iframe 或弹出窗口中直接 new MessageChannel() 不会报错，但后续 port1.postMessage() 无法触发对方的 message 事件——因为浏览器静默丢弃了跨源消息。确保两个通信端（比如主页面和 iframe）协议、域名、端口完全一致，否则管道虽能创建，却形同虚设。
常见误操作：
— 在 iframe 的 src 中写 http://example.com/child.html，而主页面是 https://example.com/parent.html（协议不同）
— 本地开发时用 file:// 协议加载两个 HTML 文件（此时 origin 为 null，不满足同源）
postMessage 后必须显式调用 port.start() 或设置 onmessage
MessageChannel 创建后，两个端口默认处于“挂起”状态。不启动监听，消息就永远卡在队列里，不会触发任何回调。
两种等效方式：
— 调用 port1.start()，然后监听 port1.onmessage
— 直接赋值 port1.onmessage = function(e) { ... }（赋值动作会隐式启动端口）
— 若使用 addEventListener('message', ...)，则必须手动调用 port1.start()，否则监听器永不执行
立即学习“前端免费学习笔记（深入）”；
典型错误现象：控制台无报错，postMessage 返回 true，但接收方收不到任何消息——八成是忘了 .start() 或没设 onmessage。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
port1 和 port2 必须分别传给通信双方，且不能重复使用
一个 MessageChannel 实例生成一对端口：port1 和 port2，它们是单向配对、双向绑定的关系。把 port1 给 A，port2 就必须给 B；反过来也行，但不能都给同一方，也不能把同一个 port 传给多个接收者。
实操建议：
— 主页面拿到 channel.port1，通过 iframe.contentWindow.postMessage(..., [channel.port2]) 把 port2 转移过去
— iframe 收到 message 事件后，从 e.ports[0] 提取该 port 并立即绑定 onmessage
— 注意：postMessage 的第二个参数必须是 [port] 数组形式，不能是 port 单个对象，否则传输失败且无提示
传输大量数据时优先用 transfer 而非 copy
向 port.postMessage(data, [transferList]) 传 ArrayBuffer、ImageBitmap、TypedArray 等可转移对象时，加上 transferList（如 [arrayBuffer]）能让数据零拷贝移交，大幅提升性能并释放原端内存。
不传 transferList 的后果：
— 大数组被结构化克隆，耗时且占双份内存
— 原端的 arrayBuffer 仍可读写，但接收端拿到的是副本，修改不影响原端
— 若本意是“移交所有权”，却漏写 transferList，会导致内存泄漏或逻辑错乱
正确写法示例：
const ab = new ArrayBuffer(1024 * 1024);
port1.postMessage({ type: 'data' }, [ab]); // ab 现在在 port2 那边可用，port1 这边 ab.byteLength 变为 0
跨端通信真正难的不是创建管道，而是确保端口生命周期与业务逻辑对齐——比如 iframe 卸载前没 close port，或反复创建 channel 却未清理旧 port，都可能引发静默失败或内存堆积。
