使用DocumentFragment或innerHTML批量操作DOM可显著提升性能，避免频繁重排；通过缓存布局属性、用CSS类切换代替直接样式修改进一步优化，核心是减少DOM交互次数。
原生JS操作DOM生成HTML时，性能瓶颈通常出现在频繁的DOM操作和重排（reflow）与重绘（repaint）。直接逐个添加元素会导致浏览器不断重新计算布局，严重影响页面响应速度。优化的核心在于减少DOM访问次数、批量操作以及避免不必要的渲染开销。
使用文档片段（DocumentFragment）批量插入
将多个DOM节点先添加到DocumentFragment中，再一次性插入到页面，能有效减少重排次数。
- DocumentFragment是一个轻量级的容器，不在真实DOM树中，操作它不会触发页面重排
- 适合用于构建大量动态内容后再整体挂载
示例：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const div = document.createElement('div');
div.textContent = `Item ${i}`;
fragment.appendChild(div);
}
document.body.appendChild(fragment); // 只触发一次重排
拼接字符串后通过 innerHTML 批量渲染
相比创建多个DOM节点，使用字符串拼接生成HTML模板，再通过innerHTML一次性写入，效率更高。
立即学习“前端免费学习笔记（深入）”；
- 现代浏览器对innerHTML有良好优化，尤其在处理大量静态结构时表现优异
- 注意避免在循环中反复设置innerHTML
- 需防范XSS风险，确保动态内容已转义或可信
- 不要在循环中读取布局属性
- 如需获取尺寸，先缓存值，统一处理
- 预先定义好CSS类名
- 通过classList.toggle/add/remove控制显示状态
- 让浏览器更高效地处理样式变化
建议方式：
const html = Array.from({ length: 1000 }, (_, i) =>
`<div>Item ${i}</div>`
).join('');
document.getElementById('container').innerHTML = html;
避免频繁读取布局信息
在操作DOM过程中，读取offsetTop、clientWidth等属性会强制浏览器同步计算样式和布局，导致性能下降。
错误示例：
for (let i = 0; i < items.length; i++) {
items[i].style.left = container.offsetWidth + 'px'; // 每次都触发重排
}
使用 CSS 类切换代替频繁样式修改
直接修改元素的style属性会增加内联样式，容易引发重排重绘。
基本上就这些。关键是把多次操作合并成一次，减少与DOM的“打交道”次数。虽然原生JS已经很快，但DOM本身很“贵”，只要策略得当，性能完全可以满足大多数场景需求。
