structuredclone()用于安全深拷贝中小规模结构化数据，保留原引用；transferable对象（如arraybuffer）通过transfer实现零拷贝移交所有权，适合大块二进制数据；混合策略可兼顾元数据完整性与载荷传输效率。
在HTML5中，克隆（structuredClone）与转移（Transferable对象，如ArrayBuffer、MessagePort等）是两种关键机制，用于在主线程与Web Worker之间、或跨iframe通信时处理大型数据。它们对内存和传输性能有截然不同的影响：克隆产生副本，安全但耗内存；转移则零拷贝移交所有权，高效但需放弃原引用。合理选择或组合使用，才能在内存占用与传输速度间取得平衡。
克隆适合需要保留原始数据的场景
当主线程仍需读写原始数据（如图像像素数组、JSON配置、状态快照），又需将一份独立副本送入Worker处理时，structuredClone()是最直接的选择。它支持大多数常用类型（Object、Array、Date、Map、Set、TypedArray等），且自动深拷贝，无需手动序列化。
- 适用于中小规模数据（如几MB以内的结构化对象）
- 避免因共享引用导致的竞态问题，线程安全
- 注意：不支持函数、
RegExp、Promise、DOM节点等，会抛错 - 示例：
worker.postMessage(structuredClone(largeConfig), []);
转移适合大块二进制数据的高速传递
对于ArrayBuffer、ImageBitmap、OffscreenCanvas等可转移对象，使用transfer参数可实现零拷贝传输——数据内存地址直接移交，原上下文中的引用立即失效（变为null或detached）。这极大降低内存峰值与序列化开销，特别适合视频帧、音频缓冲、大型网格数据。
- 必须显式传入
transfer数组，例如：worker.postMessage(buffer, [buffer]); - 转移后主线程不能再访问该
ArrayBuffer，否则读写会静默失败 - 可组合使用：只转移大块二进制字段，其余结构化字段用克隆
- 注意：
TypedArray本身不可转移，但其.buffer可以
混合策略提升综合效率
真实应用中，数据常包含“元信息+载荷”两部分。例如一个图像处理任务可能含：{id: 1, format: 'png', timestamp: Date.now(), pixels: new Uint8ClampedArray(...)}。此时可拆分处理：
- 用
structuredClone()传递轻量元数据（id、format、timestamp） - 将
pixels.buffer加入transfer列表单独转移 - 最终发送：
worker.postMessage({meta, pixels}, [pixels.buffer]); - Worker端收到后，
meta是完整副本，pixels是拥有所有权的视图
避免常见误区
盲目追求“零拷贝”或“完全隔离”都可能适得其反：
- 频繁转移小对象（如几个字节的
ArrayBuffer）反而增加调度开销，不如克隆 - 误以为
structuredClone能转移——它只是深拷贝，不会释放原内存 - 忘记检查
ArrayBuffer.isView()或.byteLength，导致转移空或无效缓冲区 - 在转移后继续使用原
ArrayBuffer，引发静默错误（如TypedArray.length === 0）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
