JavaScript中跨窗口通信postMessage的序列化开销-js教程-PHP中文网

postmessage 会隐式执行结构化克隆导致序列化开销，影响性能；应只传必要字段、善用 transferable 零拷贝传递 arraybuffer 等类型，并通过节流、blob 或 indexeddb 优化大数据通信。

javascript中跨窗口通信postmessage的序列化开销

postMessage 本身不直接产生“序列化开销”，但跨窗口通信中数据的序列化是隐式发生的，且对性能有实际影响——关键在于你传什么、怎么传。

postMessage 会自动序列化数据

当你调用 window.postMessage(data, targetOrigin) 时，浏览器会对 data 执行结构化克隆（structured clone）算法。这个过程不是 JSON.stringify/parse，而是更强大（支持 Map、Set、Date、RegExp、ArrayBuffer 等），但也更重：

深层遍历对象图，复制所有可克隆属性，跳过函数、undefined、Symbol、循环引用等
ArrayBuffer 及其视图（如 Uint8Array）会被真实拷贝（零拷贝仅在 Transferable 场景下生效）
克隆耗时与数据大小、嵌套深度、类型复杂度正相关；10MB 的纯数组可能毫秒级，而含大量小对象的 2MB 数据可能更慢

避免无意中传递高成本数据

常见踩坑点：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

传整个 Vue/React 组件实例或 DOM 节点（不可克隆，会静默失败或抛错）
传未清理的调试信息：比如带完整堆栈、闭包变量、大型日志对象
频繁发送未节流的大对象（如每帧发一次 canvas 像素数据）
误以为 postMessage 支持共享内存 —— 默认是深拷贝，不是引用传递

用 Transferable 降低大二进制开销

当需传递 ArrayBuffer、MessagePort 或 ImageBitmap 时，可将其移入 transfer 参数，实现零拷贝移交：

const buffer = new ArrayBuffer(1024 * 1024);
// 发送后，原页面 buffer 变为空，接收方获得所有权
targetWindow.postMessage({ type: 'data', payload: buffer }, '*', [buffer]);

注意：Transferable 只能用一次，且仅限特定类型；普通对象、JSON、字符串仍走结构化克隆。