重绘和重排--为什么需要避免大量的重绘和重排？

        当改变一个元素的尺寸位置属性时，会重新进行样式计算（Computed Style），布局（Layout）绘制（Panit）以及后面的所有流程，这种行为我们成为重排（回流）。

        当改变某个元素的颜色属性时，不会重新触发布局，但还是会触发样式计算和绘制，这个就是重绘。

        重排和重绘都会占用主线程，还有另外一个东西也是运行在主线程，那就是JS，都是在主线程上运行，就会出现抢占执行时间的问题。如果写了一个不断导致重绘重排的动画，浏览器则需要在每一帧都运行样式，计算布局和绘制的操作。

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

        1.可以通过requestAnimationFrame来解决上面问题，requestAnimationFrame这个方法会在每一帧被调用，通过API的回调，可以把JS运行任务分成一些更小的任务块（分到每一帧），在每一帧时间用完前暂停JS执行归还主线程，在下一帧开始时主线程就可以按时执行布局和绘制。

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