UD5工具箱
第一步：了解界面布局
打开工具页面后，首先熟悉整体界面布局。页面上方是标题和浏览器支持信息（Chrome 98+、Firefox 94+、Safari 15.4+）。核心操作区分为三个面板：左侧是「原始对象」面板，中间是「克隆对象（复制模式）」面板，右侧是「克隆对象（转移模式）」面板。上方有 ArrayBuffer 大小选择器（1KB 到 10MB）和操作按钮（生成测试数据、克隆复制、克隆转移、重置）。
第二步：生成测试数据
选择一个 ArrayBuffer 大小（建议先从 1KB 开始），然后点击「生成测试数据」按钮。工具会创建一个包含指定大小 ArrayBuffer 的测试对象，显示在「原始对象」面板中。此时原始对象的 buffer 状态显示为绿色活跃状态，byteLength 显示正确的大小（如 1024）。两个克隆面板仍处于等待状态，显示「点击克隆操作」。
第三步：执行复制模式克隆
点击「克隆（复制 Buffer）」按钮，使用 structuredClone(obj)（不带 transfer 选项）创建深拷贝。观察中间面板的变化：克隆对象的 buffer 状态显示为绿色，byteLength 与原始对象相同（1024）。关键观察点：原始对象的 buffer 仍然是绿色活跃状态——因为复制模式下两个 buffer 是完全独立的副本，互不影响。面板下方会显示克隆耗时。
第四步：执行转移模式克隆
点击「克隆（转移 Buffer）」按钮，使用 structuredClone(obj, { transfer: [buffer] }) 创建带转移的深拷贝。观察右侧面板和左侧面板的变化：克隆对象的 buffer 状态显示为绿色，byteLength 正确；但原始对象的 buffer 状态变为红色失效，byteLength 变为 0。这就是 Transfer 的核心效果——ArrayBuffer 的所有权从原对象转移到了克隆对象，原对象彻底失去了对 buffer 的访问权。
第五步：对比大数据量下的性能
将 ArrayBuffer 大小调整为 5MB 或 10MB，重新执行生成和克隆操作。对比两种模式的耗时：复制模式需要复制整个 buffer，耗时随数据量线性增长；转移模式只需要修改内存引用，耗时几乎恒定（接近零）。观察原始对象的 buffer 状态变化——转移后 byteLength 变为 0，而复制模式下仍然有效。通过多次实验，理解 Transfer 在大数据场景下的性能优势。
第六步：学习内置知识点
滚动到页面底部的「常见问题与知识点」区域，阅读内置的知识卡片。了解 structuredClone 的定义和能力、Transfer 选项的原理、可转移对象的类型列表（ArrayBuffer、MessagePort、ImageBitmap 等）、structuredClone 与 JSON 深拷贝的对比表格、Transfer 后原对象的状态变化（neutered）、适用场景建议（Web Worker 通信、大文件处理、WebGL 纹理等）。这些知识帮助你在实际项目中正确选择和使用 Transfer 机制。