直接循环 appendChild 会触发多次重排，因每次插入真实 DOM 都可能强制浏览器重新计算样式和布局；应使用 DocumentFragment 批量操作后一次性挂载。
为什么直接循环 appendChild 会触发多次重排
浏览器在 DOM 变更后，若需要计算布局（比如获取 offsetHeight、getComputedStyle），或处于同步渲染流程中，会强制进行重排（reflow）。每次调用 appendChild 到真实 DOM，尤其是对同一父容器反复操作时，浏览器可能在每次插入后都重新计算样式和布局——尤其当父元素已挂载、有 CSS 尺寸依赖或存在浮动/定位影响时。
常见错误现象：
– 循环插入 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 只是帮你把那一次重排，稳稳地锚定在你明确指定的位置。
