1.什么是重绘，什么是回流？如何减少回流？

• 重绘（Repaint）： 当元素样式改变但不影响布局时，浏览器会触发重绘过程。典型的触发场景包括修改背景色、字体颜色等外观属性。

• 回流（Reflow）： 当元素的布局属性（如宽高、位置等）发生变化时，浏览器需要重新计算布局，这个过程称为回流。回流会引发后续的重绘操作。

• 性能对比： 回流操作成本显著高于重绘，因为它需要重新计算元素的几何属性和整个页面布局，而重绘仅需更新元素的视觉呈现。

• 优化建议：

1. 优先使用CSS动画替代JS动画：CSS动画可利用GPU加速，性能更优。建议使用transform和opacity属性创建动画，避免修改布局属性。

2. 启用硬件加速：通过设置translate3d(0,0,0)强制启用GPU加速，可有效减少回流并提升动画流畅度。

3. 批量样式修改：通过切换CSS类名一次性修改多个样式属性，避免频繁操作布局相关的样式。

4. 合理调度动画帧：使用requestAnimationFrame确保动画在浏览器重绘周期内执行，减少不必要回流。

5. 使用文档片段：批量DOM操作时，先将元素添加到DocumentFragment，再统一插入DOM树（类似虚拟DOM的实现方式）。

6. 脱离文档流策略：使用绝对定位(position:absolute/fixed)或浮动(float)使元素脱离常规文档流，可减少但不完全避免回流。

7. 智能隐藏元素：使用visibility:hidden替代display:none，前者保持元素占位不会触发回流，后者会移除元素导致回流。