谈谈你对重绘和回流的理解

先了解浏览器的渲染流水线

1.回流（也叫重排）

触发条件：当我们对DOM结构的修改引发DOM几何尺寸变化的时候，重新渲染DOM树，发生回流。

具体一点：

1. 一个DOM元素的几个属性变化，常见的集合属性有width height padding margin left top border等
2. 使DOM节点发生增减 移动
3. 读写 offset族 scroll族 client族 属性的时候，浏览器为了获取这些属性值，需要进行回流操作
4. 调用window.getComputedStyle 方法

2.重绘

触发条件：当DOM的修改导致了样式的变化，并且没有影像几何属性的时候，导致重绘，比如字体颜色、背景色等。

重绘跳过了生成布局树和建图层树的阶段，直接生成绘制列表，然后继续进行分块、生成位图等后面一系列操作。

可以看到，重绘不一定导致回流，但回流一定发生了重绘。

知道原理后，对开发有什么指导意义？

1. 避免频繁使用style，而是采用修改class的方式
2. 对于resize、scroll等进行防抖、节流处理