dom节点深拷贝必须用clonenode(true)，但会复制id、丢失事件监听器、不保留表单实时值和js属性，克隆后为孤儿节点需手动插入并重置id、重新绑定事件、同步表单值。
深拷贝 DOM 节点时没清空事件和引用，内存直接卡死
用 cloneNode(true) 深拷贝一个带事件、闭包或数据绑定的节点，等于把整条引用链原样复制——包括 addEventListener 绑定的 handler、handler 里捕获的 data 对象、甚至 IntersectionObserver 实例。这些副本不会自动解绑，也不会随原节点销毁而释放。
- 常见错误：克隆表格行后直接
appendChild，但没调用oldRow.removeEventListener('click', handler) - 更隐蔽的是：克隆前节点已挂载过
canvas.getContext('2d')，clone 后新 canvas 仍强引用旧上下文（V8 不认为这是“新对象”） - 验证方法：堆快照中搜
Detached HTMLDivElement，Retaining path 末尾出现cloneNode或EventListener就是它
DocumentFragment 里塞了 cloneNode 的节点，反而放大泄漏
DocumentFragment 本身不占内存，但它成了“中转站”——你往里面 appendChild(cloneNode(true))，再一次性挂到 DOM，看起来干净，实则把所有未清理的引用都打包带过去了。Fragment 插入后自动清空，但那些被 clone 出来的节点早已在 JS 层建立了独立引用链。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 典型场景：富文本编辑器每次粘贴都
frag.appendChild(range.cloneContents())，而range里含contenteditable元素及绑定的input监听器 - 错觉：“没插进 DOM 就安全”，但只要变量还持有
const cloned = node.cloneNode(true)，GC 就无法回收整棵子树 - 正确做法：克隆后立即遍历子节点，手动移除事件监听器、清空
dataset、断开observer.disconnect()
用 innerHTML + cloneNode 组合操作，触发双重重建泄漏
先 el.innerHTML = templateString，再对生成的节点调用 cloneNode(true)，等于让浏览器干了两轮活：第一轮解析字符串建 DOM，第二轮深度复制节点树。更糟的是，innerHTML 创建的节点默认不带 removeEventListener 清理逻辑，clone 后又叠加一层闭包引用。
- 高频发生于：动态表单渲染、拖拽排序后保存快照、代码预览区实时更新
- 性能对比：纯
cloneNode耗时约 0.3ms，加innerHTML初始化后升至 4.7ms（实测 Chrome 126） - 替代方案：用
template标签缓存结构，document.importNode(template.content, true)—— 它不执行脚本、不触发解析，且天然隔离事件绑定
第三方插件返回的 DOM 节点自带隐藏引用，clone 前根本看不出
像 ECharts、Mapbox、Monaco Editor 这类库，返回的容器节点表面只是个 <div>，但内部通过 <code>WeakMap、__private 属性或全局注册表关联实例。你 clone 它，等于把私有状态也复制了一份，而插件自身销毁逻辑只认原始节点。
- 现象：克隆地图容器后调用
map.remove()，原地图消失，但克隆体仍在内存里持续占用 12MB+（堆快照显示MapboxGL构造函数重复出现） - 排查技巧：在 Elements 面板右键节点 →
Show DOM properties，搜__开头属性或data-隐藏标记 - 安全做法：别 clone 插件容器，改用插件提供的
getContainer()或getCanvas()取底层元素，再单独创建新实例
performance.memory.usedJSHeapSize 涨到 85%，往往已经漏了几十次。
