面试资料积累css-重排，重绘

重排？

当我们改变了一个元素的尺寸的位置属性时，会重新进行样式计算（computed style）布局（layout）
绘制（paint）以及后面的所有流程，这种行为叫重排

重绘？

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

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

什么情况下触发？

1.页面首次进入时渲染。
2.浏览器resize
3.元素位置和尺寸发生改变的时候 
4.可见元素的增删
5.内容发生改变 
6.字体的font改变
7.css伪类激活
……

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

优化方案一：

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

优化方案二：

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

避免重绘重排的具体方案

1.css

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

js：

避免频繁操作样式，合并操作
避免频繁操作Dom，合并操作
防抖节流控制频率
避免频繁读取会引发回流/重绘的属性，比如上面的C\O\S属性。
对具有复杂动画的元素使用绝对定位