UD5工具箱
复制模式与转移模式并排对比
工具的核心功能是将 structuredClone 的两种操作模式并排展示。左侧是「复制模式」（不使用 transfer 选项），ArrayBuffer 被完整复制，原对象和克隆对象各自持有独立的 buffer 副本；右侧是「转移模式」（使用 transfer 选项），ArrayBuffer 的所有权从原对象转移到克隆对象，原 buffer 被置为失效状态。两种模式同时执行，结果并排展示，用户可以直观看到复制模式下两个 buffer 都有效，而转移模式下原 buffer 变为 0 字节的差异。
可调测试数据大小
提供 5 种预设的 ArrayBuffer 大小：1KB、100KB、1MB、5MB、10MB。用户可以选择不同的大小来观察 Transfer 的性能优势。小数据量下两种模式的差异可能不明显，但随着数据量增大到 5MB 或 10MB，转移模式的零拷贝优势会越来越显著。这种设计帮助开发者理解 Transfer 在大数据场景下的实际价值——不是所有情况都需要 Transfer，关键在于数据量和使用场景的权衡。
一键生成与克隆
点击「生成测试数据」按钮创建包含 ArrayBuffer 的测试对象，然后分别点击「克隆（复制 Buffer）」和「克隆（转移 Buffer）」按钮执行对应模式的 structuredClone。工具会自动测量每次克隆的耗时，并在结果区域显示。支持「重置」按钮清空所有状态，从头开始新的测试。操作流程简洁直观，用户可以快速进行多次对比实验。
Buffer 状态实时可视化
工具实时显示每个对象中 ArrayBuffer 的状态。原始对象显示 buffer 是否活跃（绿色表示有效，红色表示已失效）；克隆对象显示 buffer 是独立副本还是已转移。转移后，原始对象的 ArrayBuffer.byteLength 变为 0，状态显示为红色失效。这种视觉化的状态展示让 Transfer 的「所有权转移」概念变得直观易懂——一旦转移，原对象就彻底失去了对 buffer 的访问权。
对象预览功能
每个对象区域都提供「对象预览」功能，点击展开可以查看对象的内部结构——包括 ArrayBuffer 的大小、视图信息等。原始对象、复制模式克隆和转移模式克隆的对象预览分别展示，帮助用户理解 structuredClone 操作前后对象结构的变化。特别是在转移模式下，原对象的 ArrayBuffer 视图会显示为 0 字节，与复制模式下两个独立 buffer 形成鲜明对比。
内置知识卡片
工具底部内置了常见问题与知识点区域，覆盖 structuredClone 的定义、Transfer 选项的原理、可转移对象的类型列表、structuredClone 与 JSON 深拷贝的对比表格、Transfer 后原对象的状态变化、适用场景建议、如何检测可转移对象等核心知识点。这些内容以问答形式组织，帮助用户在实验的同时建立完整的知识体系。