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 数据可能更慢

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

常见踩坑点：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

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

用 Transferable 降低大二进制开销

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

立即学习“Java免费学习笔记（深入）”；

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

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

优化建议：轻量 + 懒序列化 + 节流

• 只传必要字段：用 pick 或解构提取 ID、状态码、少量元数据，而非整个响应体
• 大数据走 Blob + URL.createObjectURL 或 IndexedDB 共享，用 postMessage 仅传路径或 key
• 对高频消息（如拖拽坐标）做 requestIdleCallback 或防抖，合并发送
• 接收方用 event.data 后立即处理，避免在 onmessage 中做重解析（如再 JSON.parse）