createElement添加到DOM前是否触发重排？DocumentFragment行为疑惑

核心问题 #

当动态创建的元素直到函数执行结束才加入DOM树时，是否需要使用DocumentFragment？结合以下示例代码分析相关疑问：

示例代码 #

HTML:

<body>
   <div id="target"> </div>
</body>

JS:

const ul = document.createElement("ul")

for (let i=0; i<100000; i++) {
   let li = document.createElement("li")
   let li_text = document.createTextNode("Node #: " + i)
   li.appendChild(li_text)
   ul.appendChild(li)
}

document.getElementById("target").appendChild(ul)

具体疑问 #

1. 循环创建<li>并添加到<ul>时，每次都会触发重排吗？还是仅当<ul>被添加到#target时才触发一次重排？
2. 如果是前者，是否需要通过DocumentFragment避免多次重排？比如：创建文档片段→向片段添加<ul>→将<li>添加到该<ul>→最后把片段添加到<div>中？
3. 如果是后者，这类场景下使用DocumentFragment的优势是什么？

背景 #

我正在开发一个需要动态生成大量列表的项目，目前在做性能优化，但不确定如何监测或测试这类DOM行为。平时使用Firefox，通过本地Apache服务器进行测试。

解答 #

1. 重排触发时机分析

你的示例代码中，循环添加<li>的操作不会触发任何重排。原因是此时<ul>属于浏览器内存中的"离线节点"，还未挂载到DOM树中。浏览器只会对已加入DOM树的节点修改触发重排/重绘，离线节点的子元素添加、属性修改等操作，都不会触发页面布局计算。只有当最后把<ul>追加到#target时，浏览器才会执行一次完整的布局计算，也就是一次重排。

2. 该场景无需使用DocumentFragment

你的代码已经实现了"先在内存中构建完整DOM结构，再一次性挂载到页面"的逻辑，和使用DocumentFragment的性能表现完全一致，没必要额外引入DocumentFragment。

3. DocumentFragment的适用场景

DocumentFragment的核心优势体现在以下两种场景：

• 无容器批量插入多元素：比如你需要插入10个独立的<p>标签，不想额外套一个<div>当容器，就可以把这些<p>都放进DocumentFragment，再将片段插入目标元素——此时片段内的所有子元素会直接被插入目标，不会留下任何多余的容器节点。
• 打包分散节点批量插入：如果要插入的节点不属于同一个父容器，而是多个独立节点，用DocumentFragment可以把它们打包，一次性插入DOM，避免多次插入触发多次重排。

4. Firefox下监测重排/重绘的方法

给你两个实用的测试手段：

• 性能面板录制：打开Firefox开发者工具→切换到「性能」面板→点击录制按钮后执行你的代码→录制结束后，在时间线中查找「布局」（Layout）条目，就能看到重排的次数、耗时，精准定位触发点。
• 高亮重绘区域：打开开发者工具设置（右上角齿轮图标）→进入「高级」选项→勾选「高亮重绘区域」。之后页面发生重绘时，对应区域会被红色边框高亮，可直观看到哪些操作触发了重绘。

内容的提问来源于stack exchange，提问作者Devin