回流和重绘

1. 构建 frame, 以建立DOM树。
2. 回流(reflow) 引起Dom树结构变化，改变页面布局。
3. 重绘(repaint) 不会引起Dom树变化及页面布局变化，只重新渲染页面样式

 回流(Reflow)和重绘(Repaint)

• 重绘是当节点需要更改外观而不会影响布局，比如改变color就称为重绘。
• 回流是布局或者集合属性需要改变就称为回流。

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

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

• 改变window大小
•  改变文字
• 添加会删除样式
• 文字改变
• 定位或浮动
• 盒模型

很多人不知道的是，重绘和回流其实和Event loop有关。

1. 当Event loop执行完Microtasks后，会判断document是否需要更新。因为游览器是60Hz的刷新率，每16ms才会更新一次。
2. 然后判断是否有resize或者scroll，有的话会去触发事件，所以resize和scroll事件也是至少16ms才会出触发一次，平且自带节流功能。
3. 判断是否触发了media query
4. 更新动画平且发送事件
5. 判断是否有全屏操纵事件
6. 判断requestAnimationFrame回调
7. 执行IntersectionObserver回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好
8. 更新界面
9. 以上就是一帧率中可能会做的事情。。如果在一帧率中有空闲时间，就会执行requestIdleCallback回调