如何通过document.createDocumentFragment实现DOM批量插入并有效减少重排？

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

使用 `document.createDocumentFragment 批量插入 DOM 元素，核心在于先将多个节点先离线组装好，再一次性挂载到真实 DOM 中，从而避免每次插入都触发浏览器的 reflow 和 repaint。

为什么 DocumentFragment 能减少重排

DocumentFragment 是一个轻量级的 DOM 片段，它不直接属于主文档树，也不在页面中渲染。向 Fragment 中添加子节点不会触发任何布局计算或样式重排；只有当整个 Fragment 作为单个节点被插入到真实 DOM 时，浏览器才进行一次统一的布局更新。

正确使用 DocumentFragment 的步骤

以下是最简、安全、通用的操作流程：

• 调用 document.createDocumentFragment() 创建空片段
• 用循环或批量逻辑创建元素（如 document.createElement），并逐个 appendChild 到 fragment
• 将 fragment 一次性插入目标容器（如 container.appendChild(fragment) 或 container.append(fragment)）

常见错误与避坑提示

这些做法看似省事，实则失效或引入新问题：

• 重复使用同一个 fragment：fragment 插入后自动清空，再次 append 不会报错但无效果，需重新创建
• 混用 innerHTML 和 fragment：若先用 innerHTML = '' 清空容器，再用 fragment 插入，虽可行，但清空本身可能触发一次重排；更优方式是先建 fragment，再替换内容（如 container.replaceChildren(fragment)）
• 对 fragment 调用 querySelector 等查找方法：它支持标准 DOM 方法，但注意 fragment 没有 ownerDocument 外的完整上下文（如无 document.body），部分依赖全局环境的脚本可能异常

一个实用示例：动态生成 100 个列表项

对比直接循环插入与 fragment 方案：

// ❌ 低效：每次插入都可能触发重排 for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `Item ${i}`; list.appendChild(li); // 每次都可能重排 } // ✅ 高效：仅一次重排 const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `Item ${i}`; fragment.appendChild(li); } list.appendChild(fragment); // 一次性挂载