如何用 document.createDocumentFragment 减少循环插入节点时的回流次数-js教程-PHP中文网

循环中直接appendchild会频繁触发回流，因每次插入都迫使浏览器重新计算父容器的几何属性并重排布局，尤其在子节点含宽高、浮动等样式时开销显著。

如何用 document.createdocumentfragment 减少循环插入节点时的回流次数

为什么循环中直接 `appendChild` 会频繁触发回流

浏览器在每次向真实 DOM 插入一个新节点（尤其是子元素）时，如果该节点已挂载到页面上，就可能触发样式计算和布局重排（reflow）。循环里反复调用 appendChild 到同一个父容器，等于让浏览器一次次“重新估算整个容器的尺寸、位置、换行等”，尤其当子节点含宽高、浮动、定位或字体渲染依赖时，开销明显。

常见错误现象：for (let i = 0; i —— 这会引发最多 100 次回流，而非 1 次。

即使父容器是 display: none 或 visibility: hidden，部分浏览器仍会执行布局计算
innerHTML += ... 看似简洁，但每次赋值都会先清空再重建全部子树，同样导致多次解析与回流
使用 DocumentFragment 的核心价值，是把所有节点先“离线组装好”，最后只做一次真实 DOM 插入

如何正确创建并填充 `DocumentFragment`

DocumentFragment 是一个轻量级文档对象，不绑定到页面，没有父节点，插入/移除它不会触发任何回流。关键在于：必须用 document.createDocumentFragment() 创建，不能用 new DocumentFragment()（后者在多数浏览器中不可用或行为异常）。

实操建议：

先调用 const frag = document.createDocumentFragment();
循环中对 frag 调用 appendChild、append 或 prepend —— 这些操作完全不触发布局
循环结束后，仅调用一次 parent.appendChild(frag)，此时才真正插入整棵子树，触发 1 次回流
注意：frag 插入后自动清空，再次使用需重新创建

示例：

Memories.ai

专注于视频解析的AI视觉记忆模型

下载

const frag = document.createDocumentFragment();
for (let i = 0; i 

<h3>
<code>DocumentFragment</code> 和 <code>innerHTML</code> 性能对比的关键点</h3>
<p>很多人误以为 <code>innerHTML</code> 更快，其实它在大量节点场景下往往更慢且更危险：字符串拼接易 XSS、无法复用已有节点引用、每次赋值都强制销毁旧子树并重新解析 HTML。</p>
<p>性能与安全差异：</p>

DocumentFragment 支持直接复用已存在的 DOM 节点（如从模板克隆），innerHTML 只能生成全新节点
DocumentFragment 中可自由调用 addEventListener、设置 dataset、修改 className 等，无需等待插入后再查 DOM
现代浏览器对 DocumentFragment 的 append 操作做了高度优化，1000+ 节点组装耗时通常低于 0.5ms；而 innerHTML 在长字符串下涉及词法分析、HTML 解析、树构建三阶段，延迟更不可控
若内容含用户输入，innerHTML 必须手动转义，DocumentFragment 天然免疫（因你控制的是节点文本内容而非 HTML 字符串）

容易被忽略的兼容性与边界情况

DocumentFragment 自 IE9 起就已稳定支持，无需 polyfill。但几个细节常被踩坑：

frag.children 或 frag.childNodes 在插入前是可读的，但 frag.parentElement 始终为 null —— 别试图用它做条件判断
不要对 frag 调用 querySelector，它不支持，应改用 document.querySelector 或先插入再查
若循环中需根据前一个节点状态动态生成下一个（比如序号依赖、样式继承链），确保逻辑在 fragment 组装阶段完成，而不是插入后靠 DOM 查询补救
服务端渲染（SSR）或静态生成场景中，DocumentFragment 无意义（没 DOM 环境），此时应交由框架的虚拟 DOM 或字符串模板处理