频繁调用 appendChild 会触发多次回流，应使用 DocumentFragment 批量插入、读写分离及改 class 而非内联 style 来优化，确保仅一次回流。
用 appendChild 动态添加 DOM 节点本身很简单，但频繁调用会触发多次回流，拖慢页面。关键不是少写几行代码，而是减少浏览器重新计算布局的次数。
appendChild 的基本用法
它把一个节点作为最后一个子节点插入到指定父元素中：
- 先用
document.createElement()创建新元素 - 设置内容、属性或事件（如
textContent、setAttribute、addEventListener） - 调用父元素的
appendChild(新节点)
例如：
const list = document.getElementById('myList');const newItem = document.createElement('li');
newItem.textContent = 'Hello';
list.appendChild(newItem); // 此刻触发一次回流
避免频繁回流的核心策略
每次 appendChild 都可能让浏览器重新计算布局，100 次调用 ≈ 100 次潜在回流。真正有效的优化不是“改写法”，而是“换节奏”：
立即学习“Java免费学习笔记（深入）”；
-
用 DocumentFragment 批量暂存：先把所有新节点加到内存中的文档片段里，最后一次性挂载。浏览器只在
appendChild(fragment)时计算一次布局 -
读写分离：别在循环里一边读
offsetHeight一边改style.height，这会让浏览器反复强制回流。先集中读完所有值，再统一写样式 -
改 class 而非 style：连续设
el.style.color、el.style.margin会多次触发渲染；换成el.classList.add('highlight')，样式由 CSS 规则控制，一次生效
实际对比：低效 vs 高效
❌ 逐个添加（100 次回流风险）：
for (let i = 0; i const li = document.createElement('li');li.textContent = `Item ${i}`;
list.appendChild(li); // 每次都可能回流
}
✅ 文档片段批量插入（仅 1 次回流）：
const frag = document.createDocumentFragment();for (let i = 0; i const li = document.createElement('li');
li.textContent = `Item ${i}`;
frag.appendChild(li); // 不触发现实 DOM 更新
}
list.appendChild(frag); // 仅此处触发一次回流
其他实用技巧
- 需要插到开头？用
parent.insertBefore(newNode, parent.firstChild)，效果等同于prepend - 临时隐藏再操作：对复杂更新，可先
el.style.display = 'none'，操作完再恢复，期间不触发回流 - 动画优先用
transform和opacity：它们只触发重绘甚至 GPU 加速，不引发回流
