减少DOM重排与重绘可提升渲染性能：批量操作样式（用CSS类代替逐条style赋值）、读写分离避免强制同步布局、使用DocumentFragment批量插入节点、对动画元素启用transform/opacity硬件加速。
减少DOM重排（Reflow）和重绘（Repaint）是提升网页渲染性能的关键。重排指浏览器重新计算元素几何属性（如位置、尺寸），重绘指根据新样式重绘像素。重排必然触发重绘，但重绘不一定触发重排。频繁操作会阻塞主线程，导致卡顿。核心思路是：批量操作、避免强制同步、减少样式读写交替、降低影响范围。
批量修改样式，用CSS类代替逐条设置
直接修改 element.style.xxx 多次会多次触发重排/重绘；而切换预定义CSS类，浏览器可合并计算。
- ✅ 推荐：用
element.classList.add("active")切换已定义好的样式规则 - ❌ 避免：
el.style.width = "100px"; el.style.height = "50px"; el.style.background = "#fff";（三次独立赋值） - ? 小技巧：需要动态计算样式时，先修改 class，再读取
getComputedStyle，比边改边读更安全
读写分离：避免强制同步布局（Forced Synchronous Layout）
当在修改样式后立即读取布局相关属性（如 offsetTop、clientWidth、getComputedStyle），浏览器不得不立刻执行重排来返回准确值——这会打断渲染流水线，非常昂贵。
- ✅ 正确顺序：先集中读取所有需要的布局值，再集中修改样式
- ❌ 危险模式：
el.style.height = el.offsetHeight + "px";（读→写→再读→再写…） - ? 工具辅助：Chrome DevTools → Rendering → 勾选 “Layout Shift Regions” 或 “FPS Meter”，可直观发现强制重排
使用文档片段（DocumentFragment）或离线DOM操作
向真实DOM批量插入多个子节点时，每插入一个都可能触发重排。用 DocumentFragment 先构建完整结构，再一次性挂载，可将多次重排合并为一次。
立即学习“Java免费学习笔记（深入）”；
- ✅ 示例：
const frag = document.createDocumentFragment(); for(...) { frag.appendChild(item); } parent.appendChild(frag); - ✅ 替代方案：临时设置
el.style.display = "none"，操作完再恢复（注意 display 变化本身会触发重排，适合中等规模操作） - ? 对于列表渲染，优先考虑虚拟滚动或
requestIdleCallback分帧处理，而非暴力重绘整个容器
善用硬件加速与合成层（Compositing）
对频繁动画的元素启用 GPU 加速（如 transform、opacity），让其脱离普通文档流，由合成器单独处理，避免牵连其他元素重排。
- ✅ 推荐动画属性：
transform: translateX(10px)、opacity: 0.5（不触发重排重绘，只触发合成） - ❌ 慎用动画属性：
top/left/width/height、background-color（会触发重排或重绘） - ? 小技巧：给需动画的元素加
will-change: transform（仅在必要时，避免滥用）或transform: translateZ(0)强制创建合成层
