【css】说说你对重绘和重排的理解和如何避免

考点：重绘和重排

 <img src="images/a.png" alt="image-20220222115559785" style="zoom:67%;" />

- 重绘
  - 当元素的外观、背景、颜色等改变，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘

- 重排
  - 当渲染树一部分或者全部因为大小或者边距而改变，需要渲染树重新计算的过程叫做重排
  - 重绘不一定需要重排，重排必然导致重绘

- 避免
  - 在元素的显示隐藏上尽量用 opacity 替代 visibility（重绘）
  - 元素定位时使用 transform 代替top、left（重排）
  - 尽量不使用 table 布局，因为一个小的改动会造成整个 table 重新布局（重排）
  - 减少直接操作DOM元素（重排）
  - 为元素添加类，样式都在类中改变（重绘）