documentfragment 是绕开渲染管线的内存隔离层，不参与 dom 树、不触发 layout、零解析零拷贝，仅持节点引用，内存开销极小且杜绝重排链。
document.createDocumentFragment 不是“更快的 DOM 操作”，而是绕开渲染管线的内存隔离层——它不参与 DOM 树、不触发 layout、不占用 render 树节点，因此没有额外内存开销，却能彻底切断高频插入引发的重排链。
为什么 DocumentFragment 几乎不增加 JS 堆内存
DocumentFragment 实例本身极轻量：它只是一个空壳节点对象，内部无子节点引用时，Chrome 中仅占 ~80 字节；即使挂载了 1000 个 li 元素，这些元素的内存已存在于 JS 堆中（由 document.createElement 分配），fragment 只是临时持有其父引用，不复制、不序列化、不生成新副本。
对比 innerHTML：每次拼接字符串都会创建新字符串对象（可能数 KB）、触发 HTML 解析器分配 AST 节点、构建临时 DOM 树再销毁——这些中间结构全计入 JS 堆，GC 压力明显。而 fragment 中所有节点都是你亲手创建的原始引用，零解析、零拷贝。
- 不要用
frag.appendChild(node.cloneNode(true))循环克隆——克隆会深拷贝属性、事件监听器（若启用）、dataset，显著抬高内存峰值 - 复用已有节点时，先
node.remove()再frag.appendChild(node)，避免重复引用导致的内存滞留 - fragment 插入后自动清空，不可二次使用；若需多次插入，必须重新
document.createDocumentFragment()
高频渲染下 layout 压缩与主线程保活的关键机制
浏览器对真实 DOM 的每次 appendChild 都可能同步触发样式计算 + 布局测量（尤其当目标容器已挂载且含 flex、float、position: relative 等依赖布局的样式）。100 次插入 ≠ 100 次 JS 执行，而是最多 100 次 layout 回调堆积，直接阻塞 requestAnimationFrame 和用户输入。
document.createDocumentFragment 的核心不是“快”，而是“不进管线”：它不被任何 CSSOM 匹配、不参与 layout tree 构建、不触发 paint layer 分配。所有节点在 fragment 内移动、排序、增删，浏览器完全无感。
- 插入前读取
el.offsetHeight或getComputedStyle会强制 flush pending layout——哪怕目标是 fragment 外的元素，也会让 fragment 的“离线性”失效 - 在线运行环境（如 CodePen）中，iframe 内 DOM 更敏感，fragment 是唯一能避免预览区卡死的可控方案
- 配合
requestAnimationFrame调度时，把 fragment 构建放在 rAF 回调内，插入动作放在下一个 rAF，可进一步隔离 layout 抢占
和 innerHTML 相比，何时必须选 fragment
字符串拼接看似快，但代价是失控：事件监听器丢失、表单控件 value 重置、dataset 清零、XSS 风险暴露。fragment 不是性能银弹，是可控性刚需。
- 你已有现成节点（比如从模板克隆的
li、带data-id的按钮），用innerHTML就得先outerHTML再 parse，纯浪费 - 需要为每个节点单独绑定不同事件或设置动态
class，字符串无法表达逻辑分支 - 内容来自用户输入或富文本编辑器输出，
textContent+ fragment 天然防 XSS，不用手写escapeHtml() - 目标环境需兼容 IE9+（
append()方法 IE10+ 才支持，但appendChild+ fragment 全版本通吃）
真正容易被忽略的，是 fragment 只解决“插入”问题——它不帮你做 diff、不管理更新、不调度时机。高频组件渲染卡顿，往往卡在 fragment 之外：比如在 fragment 构建循环里读取 layout、在插入后立刻查询刚插入节点的 offsetTop、或把整个列表重建逻辑塞进单次 rAF 而不拆帧。离线归离线，别忘了主线程还在等你交还控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
