从回流和重绘了解网页性能优化

首先讲回流和重绘之前要需要知道，这两个流程是在网页渲染的哪个部分？

浏览器的关键渲染步骤主要分以下几个步骤
解析
(1)解析html文件构建DOM树
(2)解析css构建cssOM
(3)将DOM和cssOM结合成渲染树
绘制
（1）根据渲染树布局(回流)
（2）根据布局绘制（重绘）
合成图层
将回流和重绘合成的图层，合并显示在屏幕上

回流

  回流主要指几何属性需要需要改变的渲染。渲染树节点的几何属性发生改变，导致其位置发生改变 ，从而重新计算生成新的渲染树。这就是回流为什么消耗性能的主要原因，因为他重新计算了生成了DOM。

重绘

  重绘指外观属性的更改。他影响了节点外观属性的变化，单并不会影响其几何属性。但是几何属性的改变一定会影响外观属性的变化。

性能优化

• 多个读操作或者多个写操作放在一起，减少回流和重绘的次数。
• 不要多次更改样式，用更换class来代替
• 使用离线DOM，将要操作的节点放在DocumentFragment中，操作完成后再插入到对应的节点，这样只有在插入时才会发生回流和重绘
• 可以将DOM设为display：none,然后对DOM进行操作，这样只会执行2次重新渲染。
• 将DOM设为position:absolute或者fixd，会减小回流的开销。
• 回流和重构和事件循环有关系。通常屏幕的刷新率是60HZ，也就是每16.66毫秒完成一次渲染，也就意味着每js线程里，每个任务需要在这个时间内完成。这时需要用到requestAnimationFrame和requestIdleCallback优化。

window.requestAnimationFrame()

  requestAnimationFrame在MDN中的介绍是告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

  在这里说下自己的理解，理解这个方法之前需要知道屏幕刷新率和动画原理（传送门），这里就不详细解释了，requestAnimationFramez会根据不同屏幕的刷新率，保证函数在每次的渲染间隔只执行一次，从而合理的执行动画。

  这里为什么说合理呐，在用setinterval处理动画的时候，因为异步的原因，动画的执行时间并不会和预期一致，而且我们需要固定时间去执行动画，时间过短会引起丢帧问题，而且会消耗更多的性能，而过多也会引起丢帧和卡顿问题。
requestAnimationFrame优点：
（1）cpu节能：requestAnimationFrame在页面隐藏或最小化的时候，会停止执行。但是定时器会不断执行，这样会造成cpu浪费
（2）requestAnimationFrame会把同一帧的DOM操作，放在一起进行，从而只产生一次重绘和回流。

window.requestIdleCallback()

  MDN的说明：window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。
浏览器每一帧的空闲时间会执行requestIdleCallback方法，但是其第二个参数可以设定执行时间，如果每一帧都没执行requestIdleCallback的回调，那么到时间就会强制执行。 参考

requestIdleCallback(function someHeavyComputation(deadline) {
  while(deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }

  if(thereIsMoreWorkToDo) {
    requestIdleCallback(someHeavyComputation);
  }
});

回调函数的参数deadline有两个方法，timeRemaining() 方法返回当前帧还剩余的毫秒。这个方法只能读，不能写。deadline对象的 didTimeout 属性会返回一个布尔值，表示指定的时间是否过期。