重排与重绘优化需减少DOM频繁修改。通过批量操作、避免同步布局读取、使用transform和简化CSS选择器，可显著提升页面渲染性能，降低浏览器计算负担。
在HTML5开发中，页面渲染性能直接影响用户体验。重排（Reflow）和重绘（Repaint）是浏览器渲染过程中的关键环节，频繁触发会显著降低性能。优化的核心在于减少或合并这些操作，提升页面响应速度。
理解重排与重绘的区别
重排是指当页面布局发生改变时，浏览器需要重新计算元素的几何属性（如位置、大小），并重新构建渲染树。任何影响布局的操作都会触发重排，比如：
- 添加或删除可见DOM元素
- 修改几何属性（宽度、高度、边距等）
- 读取某些布局属性（如offsetTop、clientWidth）
- 调整窗口大小或字体
重绘发生在元素样式改变但不影响布局时，例如修改背景色、文字颜色。虽然比重排轻量，但依然消耗资源。
重排一定导致重绘，但重绘不一定引起重排。因此，避免不必要的重排是性能优化的关键。
立即学习“前端免费学习笔记（深入）”；
批量修改DOM以减少重排
频繁操作DOM会连续触发重排，应尽量将多次修改合并为一次更新。
- 使用DocumentFragment暂存节点，在内存中完成构建后再插入文档
- 先将元素display: none，进行多项修改后恢复显示
- 通过修改class代替逐个修改样式属性，减少样式计算次数
避免强制同步布局操作
JavaScript读取布局信息（如offsetHeight）时，若之前有样式更改，浏览器会强制刷新渲染队列以保证值准确，这会导致意外重排。
建议：
- 避免在修改样式过程中读取布局属性
- 将读写分离，所有写操作集中处理，读操作统一放在最后
例如：不要循环中交替设置样式和读取offset值，应先完成所有修改，再统一读取。
使用CSS变换替代布局属性动画
对top、left等属性做动画会频繁触发重排。推荐使用transform实现位移、缩放等效果。
- transform由合成器（compositor）处理，不触发重排
- 配合will-change或translateZ(0)启用硬件加速
例如用transform: translateX(100px)代替left: 100px。
优化CSS选择器与层级结构
复杂的选择器会增加样式计算时间，深层嵌套的DOM结构也延长重排范围。
- 使用类选择器而非标签或通配符选择器
- 避免深层后代选择器（如.a .b .c .d）
- 减少DOM深度，扁平化结构有助于局部渲染
