重绘（Repaint）和回流（Reflow）

kenxin

重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。

• 重绘是当节点需要更改外观而不会影响布局的，比如改变 颜色系列：color、 background-color、 border-color 就叫称为重绘
• 回流是布局或者几何属性需要改变就称为回流。
  

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。

以下几个动作可能会导致性能问题：

• 改变 window 大小
• 改变字体
• 添加或删除样式
• 文字改变 font-size
• 定位或者浮动 position,float
• 盒模型 pading,margin,border
  

另：很多人不知道的是，重绘和回流其实也和 Eventloop 有关。
当 Eventloop 执行完 Microtasks 后，会判断 document 是否需要更新，因为浏览器是 60Hz 的刷新率，每 16.6ms 才会更新一次。
然后判断是否有 resize 或者 scroll 事件，有的话会去触发事件，所以 resize 和 scroll 事件也是至少 16ms 才会触发一次，并且自带节流功能。
判断是否触发了 media query
更新动画并且发送事件
判断是否有全屏操作事件
执行 requestAnimationFrame回调
执行 IntersectionObserver 回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好 更新界面
以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback回调