documentfragment不触发渲染、不参与布局、不绑定事件，仅为轻量级节点容器；批量操作后一次性插入，仅引发一次回流，显著降低内存峰值与重排次数。
DOM碎片（DocumentFragment）本身不参与渲染、不触发布局、不绑定事件，它只是轻量级的节点容器；用它批量操作 DOM 能显著减少回流和内存峰值，但**它不是垃圾回收机制，也不会自动帮你清理 JS 引用或事件监听器**——用错地方反而会掩盖真实泄漏。
为什么 document.createDocumentFragment 不会触发 GC 但能降内存峰值
DocumentFragment 不挂载到 document，所以不生成渲染树节点、不计算样式、不注册事件入口。100 次 frag.appendChild() 只是 JS 对象引用搬运，而 100 次直接 container.appendChild() 会持续分配 100 个已挂载 DOM 节点，每个带 layout scope + computedStyle 缓存 + event listener 表项。
关键差异在于：
- fragment 插入后自动清空，旧引用可被 GC 回收（前提是没被闭包强持有）
- innerHTML 方式需字符串解析 → AST 构建 → DOM 树重建 → 废弃旧子树，多轮内存分配/释放
- fragment 中不能调用
querySelector或addEventListener——它没有 ownerDocument，查不到元素，也绑不了事件
常见误用：在 fragment 里克隆 template 并保留闭包引用
典型泄漏模式：从 template.content.cloneNode(true) 克隆节点塞进 fragment，再把克隆后的按钮、输入框等变量缓存在外层作用域或事件回调里。
后果是：即使 fragment 已插入并清空，这些克隆节点仍被闭包持有，GC 无法回收，形成 Detached DOM tree。
正确做法：
- 克隆后立即绑定事件，并在节点移出视口或销毁前显式
removeEventListener - 避免在创建 fragment 的函数外保留对克隆节点的直接引用，比如不要写
const btn = frag.querySelector('button')（这行根本不会执行） - 如需复用结构，优先用
dataset.id+ Map 池化真实 DOM 节点，而不是反复 clone + fragment
什么时候该用 fragment，什么时候该用节点池
二者解决的问题不同：
-
DocumentFragment适合「单次批量插入」场景：比如初始化列表、渲染弹窗内容、动态生成表单字段——目标是减少插入过程中的回流次数 - 节点池（
Map+dataset.id）适合「高频复用」场景：大屏滚动、实时告警卡片刷新、仪表盘指标轮播——目标是避免节点创建/销毁开销与事件丢失 - 混合使用可行，但别混淆职责：可以用 fragment 批量创建一批初始池节点，但后续复用逻辑必须走池管理（
acquireNode/recycleNode），不能每次 render 都 new fragment + clone
真正容易被忽略的是：fragment 能压低单次渲染内存峰值，但对长期运行的强交互页面，泄漏主因从来不是 fragment 用得多，而是节点复用时没清事件、没删定时器、或者用数组索引代替 dataset.id 导致数据错位后闭包意外持有了整批旧节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
