减少 DOM 操作次数能直接提升渲染帧率，核心是降低重排与重绘频率；应合并多次修改为一次，用 DocumentFragment 批量插入、innerHTML 一次性写入、避免强制同步布局、用 class 切换替代内联样式、优先使用 transform/opacity 动画。
减少 DOM 操作次数能直接提升渲染帧率，核心在于降低浏览器重排（Reflow）和重绘（Repaint）的频率。每次 DOM 修改都可能触发这些高开销流程，尤其在动画或高频交互中，频繁操作会挤占主线程、导致掉帧。关键不是“少改”，而是“合并改”——把多次零散变更压缩成一次完成。
用 DocumentFragment 批量插入节点
循环中逐个 appendChild 是典型掉帧诱因：100 次插入 ≈ 100 次潜在重排。DocumentFragment 是内存中的临时容器，不挂载到真实 DOM，往它里面添加元素完全不触发渲染。
- 调用
document.createDocumentFragment()创建片段 - 所有新节点都
appendChild到该片段 - 最后只执行一次真实父元素的
appendChild(fragment)
实测向列表插入 1000 个 <li>，帧率可从平均 32fps 提升至稳定 60fps。
用 innerHTML 或模板字符串一次性写入
适合内容结构简单、无需复用逻辑的场景。相比反复创建元素，字符串拼接后单次赋值更轻量。
立即学习“Java免费学习笔记（深入）”；
- 避免在循环里拼接再反复赋值
innerHTML，那仍会多次解析和重排 - 先用字符串或数组
join组装完整 HTML 片段，再一次性写入 - 注意 XSS 风险，动态内容务必做转义或使用
textContent替代
例如：list.innerHTML = items.map(i => `<li>${escapeHtml(i)}</li>`).join('');
避免强制同步布局（Layout Thrashing）
一边改样式一边读尺寸（如设 el.style.width 立刻读 el.offsetWidth），会迫使浏览器中断 JS 执行、立刻计算布局，严重拖慢帧率。
- 把所有样式写入操作集中做完，再统一读取布局信息
- 读取类尺寸属性（
offsetHeight、getComputedStyle等）尽量延迟到requestAnimationFrame回调中 - 能用 CSS 解决的定位/显隐，别用 JS 动态算位置或切
display
用 class 切换替代内联样式逐条修改
连续设置 el.style.color、el.style.margin、el.style.padding，每条都会触发样式重计算；而切换预定义 class 是原子操作，由浏览器底层高效批量处理。
- 把常用样式组合写成 CSS 类，比如
.btn-primary { color: #fff; background: #007bff; padding: 8px 16px; } - 用
el.classList.add('btn-primary')或el.className = 'btn-primary'一键应用 - 需要动画时，优先用
transform和opacity，它们不触发布局，只走合成层
