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 参数实现零拷贝移交 幻导航网 发现优质实用网站,开启网络探索之旅