JavaScript中跨窗口通信postMessage的序列化开销

postMessage 会隐式执行结构化克隆导致序列化开销，影响性能；应只传必要字段、善用 Transferable 零拷贝传递 ArrayBuffer 等类型，并通过节流、Blob 或 IndexedDB 优化大数据通信。postMessage 本身不直接产生“序列化开销”，但跨窗口通信中数据的序列化是隐式发生的，且对性能有实际影响——关键在于你传什么、怎么传。postMessage 会自动序列化数据当你调用 window.postMessage(data, targetOrigin) 时，浏览器会对 data 执行结构化克隆（structured clone）算法。这个过程不是 JSON.stringify/parse，而是更强大（支持 Map、Set、Date、RegExp、ArrayBuffer 等），但也更重：深层遍历对象图，复制所有可克隆属性，跳过函数、undefined、Symbol、循环引用等ArrayBuffer 及其视图（如 Uint8Array）会被真实拷贝（零拷贝仅在 Transferable 场景下生效）克隆耗时与数据大小、嵌套深度、类型复杂度正相关；10MB 的纯数组可能毫秒级，而含大量小对象的 2MB 数据可能更慢避免无意中传递高成本数据常见踩坑点：传整个 Vue/React 组件实例或 DOM 节点（不可克隆，会静默失败或抛错）传未清理的调试信息：比如带完整堆栈、闭包变量、大型日志对象频繁发送未节流的大对象（如每帧发一次 canvas 像素数据）误以为 postMessage 支持共享内存 —— 默认是深拷贝，不是引用传递用 Transferable 降低大二进制开销当需传递 ArrayBuffer、MessagePort 或 ImageBitmap 时，可将其移入 transfer 参数，实现零拷贝移交： 幻导航网 发现优质实用网站,开启网络探索之旅！