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

重绘

• 是指当元素样式发生改变，但不影响其布局的情况下，浏览器重新绘制元素的过程。
• 例如修改元素的背景色、字体颜色等

回流

• 是指元素布局属性发生改变，需要重新计算元素在页面中的布局位置时，浏览器重新进行布局的过程
• 例如元素的宽度高度位置改变

如何减少回流？

1. 适用 css 动画代替 JavaScript 动画
   • css 动画利用 GPU 加速，在性能方面通常比 JavaScript 动画更高效。
   • 使用 css 的 transform 和 opacity 属性来创建动画效果，而不是改变元素的布局属性
     
     
2. 使用 translate3d 开启硬件加速
   • 将元素的位移属性设置为 translate3d(0, 0, 0)，可以强制使用 GPU 加速。
   • 这有助于避免回流，并提高动画的流畅度
     
     
3. 避免频繁操作布局和样式
   • 对元素进行多次修改时，尽可能考虑一次操作
   • 通过添加删除 css 类来一次改变多个样式属性，而不是逐个修改。
     
     
4. 使用 requestAnimationFrame
   • 使用该方法调度动画帧，可以确保动画在浏览器绘制周期内执行，从而避免不必要的回流。
   • 这种方式可以确保动画在最佳时间点进行渲染。
     
     
5. 使用文档片段
   • 场景是在 DOM 中插入大量新元素时，可以先讲这些元素添加到文档片段中，然后再将整个文档片段一次性插入 DOM
     中，这样做可以减少回流次数。（虚拟 DOM Vue 的方式）
     
     
6. 让元素脱离文档流
   • position: absoulte
   • position: fixed
   • float: left
     以上方法只是减少回流，不是避免回流
     
     
7. 使用 visibility: hidden 代替 display: none
   • 隐藏元素不会出发回流，但是移除元素会引起