批量更新DOM比逐个修改快，关键在时机、数量和组织方式；用DocumentFragment或replaceChildren可减少重排重绘，避免循环中读取offsetHeight等布局属性触发强制重排。
直接批量更新 DOM 比逐个修改快得多，关键不是“怎么改”，而是“什么时候改、改多少、怎么组织改”。
用 DocumentFragment 批量插入节点，避免重排重绘
每次向 document.body 或真实父元素中 appendChild 一个新节点，浏览器都可能触发一次 layout（重排）+ paint（重绘）。100 次追加 = 可能 100 次开销。
把所有新节点先塞进 DocumentFragment，最后只插入一次，DOM 树只变更一次。
const frag = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const el = document.createElement('div');
el.textContent = `Item ${i}`;
frag.appendChild(el); // 不触发布局
}
document.getElementById('list').appendChild(frag); // 仅此处触发一次
- 适用于：动态生成大量同构节点（如列表项、表格行）
-
DocumentFragment不在 DOM 树中，不占渲染位置，也不响应事件 - 注意别对 frag 调用
querySelector—— 它没有ownerDocument的完整上下文，部分方法不可用
用 innerHTML 替代多次 textContent + appendChild
当整块结构是纯 HTML 字符串且可信（无用户输入），innerHTML 通常比手动创建 5–6 个元素再拼接快 2–3 倍 —— 浏览器内部做了优化解析和批量挂载。
立即学习“Java免费学习笔记（深入）”；
但要注意：它会销毁原节点下所有子节点及其绑定的事件监听器（即使没显式 addEventListener，比如内联 onclick）。
- 适用场景：渲染模板片段、服务端返回 HTML、配置化卡片组件
- 不适用：需保留子元素状态（如表单输入值、第三方库挂载点）、含用户可控内容（XSS 风险）
- 替代方案：若需保留某些子节点，先用
cloneNode(true)缓存再替换，或用replaceChildren()
用 replaceChildren() 安全清空并替换全部子节点
老写法 el.innerHTML = '' 再赋新值，或循环 el.removeChild(el.firstChild)，既慢又容易漏掉文本节点。现代 DOM API 提供了更明确、更安全的替代：
const container = document.getElementById('grid');
container.replaceChildren(
...Array.from({ length: 12 }, (_, i) => {
const item = document.createElement('article');
item.dataset.id = String(i);
return item;
})
);
-
replaceChildren(...nodes)原子性操作：先移除所有现有子节点，再插入新节点列表 - 不会触发多次重排；比
innerHTML = htmlString更可控（避免字符串解析开销与 XSS 风险） - 兼容性：Chrome 86+、Firefox 76+、Safari 14.1+；旧环境可用 polyfill 或回退到
textContent = ''+append()
避免在循环中读取布局属性（offsetHeight、getBoundingClientRect()）
只要读取任意一个“布局相关属性”，浏览器就可能强制同步计算当前样式和布局（reflow），如果在 for 循环里读 100 次，等于强制重排 100 次。
- 错误模式：
for (let i = 0; i < items.length; i++) { console.log(items[i].offsetTop); // 触发 reflow } - 正确做法：先批量写（如 class、style），再**一次性读**所需值，或用
getComputedStyle()缓存后复用 - 极端情况可考虑
requestAnimationFrame()分帧处理，但优先检查是否真需要实时读取
最常被忽略的点：不是“哪个 API 更快”，而是“有没有让浏览器反复在读写之间切换”。DOM 更新性能瓶颈，八成出在无意中制造了强制同步布局。
