一、什么是重绘？【代价相对较小】
当元素外观发生变化（颜色、背景色、可见性等），但布局不变，浏览器只需绘制元素，无需重新计算布局。
二、什么是回流（重排）？【代价大，耗性能】
当页面的布局结构发生变化，比如元素尺寸、位置、内容改变，浏览器需要重新计算元素的几何信息并重新布局。
🔧如何优化页面性能？
回流 > 重绘 > 直接修改 DOM，优化重点是减少回流次数，批量操作和用好浏览器渲染机制
1. 减少回流操作
- 批量修改结构样式，避免逐条修改触发多次回流。
- 使用
class替代频繁操作单个样式属性。 - 使用
documentFragment或离线 DOM 操作，最后一次性插入文档流。 - 避免频繁读取会触发回流的属性，如
offsetWidth、scrollTop，尽量缓存。
2. 减少重绘操作
- 避免使用会频繁改变颜色等视觉属性的动画，用 CSS3 硬件加速（transform, opacity）。
- 用
will-change提示浏览器做优化。
3. 使用虚拟DOM框架（React、Vue）减少直接操作DOM带来的性能开销。
4. 合并和节流事件，比如滚动和窗口大小变化事件。
5. 合理使用CSS动画代替JavaScript动画
