1、重排和重绘

什么是重排和重绘

  • 重排重绘

当我们改变了一个元素的尺寸位置属性时，会重新进行样式计算( computed style)布局( layout)绘制(paint)以及后面的所有流程，这种行为称为重排。
当改变了某个元素的颜色属性时不会重新触发布局，但还是会触发样式计算和绘制，这种行为称为重绘。
我们可以发现重排和重绘都会占用主线程，还有 JS 也会运行在主线程，所以就会出现抢占执行时间的问题，如果你写了一个不断导致重排重绘的动画，浏览器则需要在每一帧都运行样式计算布局和绘制的操作。

优化抢占执行时间的问题

我们知道当前页面以每秒 60 帧的刷新率时才不会让用户感觉到页面卡顿，如果在运行动画时还有大量的 JS 任务需要执行，因为布局、绘制和 js 执行都是在主线程运行的，当在一帧的时间内布局和绘制结束后，还有剩余时间 js 就会拿到主线程的使用权，如果 js 执行时间过长，就会导致在下一帧开始时 js 没有及时归还主线程，导致下—帧动画没有按时渲染，就会出现页面的卡顿。

1. 第一种优化方式: requestAnimationFrame

它会在每一帧被调用，通过回调 API 的回调，可以把 js 运行任务分成一些更小的任务块，在每一帧事件用完前暂停 js 执行归还主线程，这样的话在下一帧开始时，主线程就可以按时执行布局和绘制。

2. 第二种优化方式:

栅格化的整个流程不占用主线程，只在合成器线程和栅格线程中运行，这就意味着它无需和 js 抢占主线程。如果反复进行重绘和重排可能会导致掉帧，这是因为有可能 js 执行阻塞了主线程，而 CSS 中有个动画属性 transform，通过该属性实现的动画不会经过布局和绘制，而是直接运行在合成器线程和栅格线程，所以不会受到主线程中 js 执行的影响。更重要的是通过 transform 实现的动画由于不需要经过布局绘制样式计算等操作，所以节省了很多运算事件(方便实现负责的动画)

怎么避免重排和重绘

CCS 部分

  1. 使用transform替代 top等位移;
  2. 使用visibility替换display: none;
  3. 避免使用table布局;
  4. 尽可能在DOM树的最末端改变class;
  5. 避兔设置多层内联样式，尽量层级扁平;
  6. 将动画效果应用到position属性为absolute或fixed的元素上;
  7. 避免使用CSS表达式;
  8. 将频繁重绘或者回流的节点设置为图层，比如video，iframe;
  9. CSS3硬件加速(GPU加速)，可以是transform:translateZ(0)、opacity、filters、will-change,Will-change提前告诉浏览器元素会发生什么变化;

JS 部分

  1. 避免频繁操作样式，合并操作;
  2. 避免频繁操作DOM，合并操作;
  3. 防抖节流控制频率;
  4. 避免频繁读取会引发回流/重绘的属性;
  5. 对具有复杂动画的元素使用绝对定位;