如何通过document.createDocumentFragment批量插入节点，有效降低浏览器重排频率？

本文共计1126个文字，预计阅读时间需要5分钟。

非常抱歉，我无法直接修改或输出HTML代码内容。如果您需要将伪原创的内容进行简写，请提供原文，我可以帮助您进行简短的改写。

常见错误现象：
– 循环插入 100 个 <li> 后页面明显卡顿
– 使用 console.time 测得耗时远高于预期
– 在 Chrome DevTools 的 Rendering 面板看到密集的 Layout 事件

• 即使节点不立即显示（如父元素 display: none），部分浏览器仍可能提前触发样式计算
• innerHTML += ... 看似简洁，但会引发完整子树重建，开销更大
• 使用 DocumentFragment 并非“自动优化”，必须确保所有插入都在 fragment 上完成，最后仅一次挂载到真实 DOM

createDocumentFragment 的正确组装姿势

关键不是“用了 fragment”，而是“所有 DOM 构建和插入都隔离在 fragment 内部”。一旦 fragment 被 append 到真实节点，它就清空自身（变成空 fragment），且只触发一次父容器的重排。

实操建议：

• 先调用 document.createDocumentFragment() 创建空 fragment
• 用 fragment.appendChild() 或 fragment.append()（注意兼容性）添加所有新节点——不要中途把 fragment 插入真实 DOM
• 最后对目标容器执行一次 container.appendChild(fragment)
• 避免在 fragment 中混用 innerHTML：虽然合法，但会绕过 JS 节点控制，失去对事件绑定、引用管理的主动权

示例（安全写法）：

const frag = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `Item ${i}`; frag.appendChild(li); // ✅ 全在 fragment 内 } listElement.appendChild(frag); // ✅ 仅此处触发一次重排

替代方案对比：innerHTML vs DocumentFragment vs cloneNode

不同场景下性能和可控性差异明显，不能一概而论：

• innerHTML：字符串拼接快，但无法直接绑定事件、无法复用已有节点引用、HTML 字符需手动转义（防 XSS），且每次赋值都会销毁并重建全部子节点
• DocumentFragment：适合动态创建结构复杂、需 JS 控制（如设置 dataset、添加事件监听器）的节点；兼容性好（IE9+）；内存占用略高（临时对象）
• cloneNode(true)：适合重复渲染相同结构（如列表项模板），比逐个 createElement 快；但需预先准备一个“原型节点”，且克隆后需手动修改内容

性能提示：
– 若只是纯文本列表，innerHTML 可能更快（V8 优化成熟）
– 若每个节点需独立事件监听器或数据属性，DocumentFragment 是唯一安全选择
– 不要为了“减少重排”而过度抽象：10 个以内节点，差异可忽略

容易被忽略的边界情况

即便用了 DocumentFragment，以下情况仍可能导致意外重排或失效：

• 在 fragment 组装过程中，读取了任何触发 layout 的属性（如 element.offsetWidth），会强制浏览器提前计算——此时 fragment 还未挂载，计算结果无意义，且打断优化链
• 目标容器本身是 document.body 或深层嵌套节点，其父级若正在动画或有 will-change，仍可能放大重排代价
• 在 requestAnimationFrame 回调外批量操作 fragment 没问题，但若在 scroll 或 input 高频事件中反复创建 fragment，应节流或合并操作
• Fragment 不是“魔法容器”：它不阻止样式计算，只延迟 layout 触发时机。如果插入后立刻读取布局信息（如 listElement.scrollHeight），重排仍会发生——只是推迟到 appendChild 那一刻

真正影响性能的，从来不是“用了什么 API”，而是“何时读取布局”和“是否让浏览器有机会合并渲染工作”。DocumentFragment 只是帮你把那一次重排，稳稳地锚定在你明确指定的位置。