回流和重绘

1.浏览器渲染元素的过程

1. 解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树进行结合，生成渲染树
3. 根据生成的渲染树，进行回流，根据元素的几何信息，将其安放在页面中的正确位置
4. 回流之后进行重绘，根据元素的外观信息，把元素的外观绘制出来
5. 展示在页面上

2.回流

因为元素的几何信息改变，页面需要重新布局，这就称为回流。页面每次至少会发生一次回流，就是在页面第一次渲染的时候。

3.何时触发回流

• 添加，删除元素
• 元素的位置改变
• 元素的大小改变（包括外边距、内边距、边框大小等）
• 页面第一次渲染
• 浏览器窗口的大小改变

4.重绘

根据元素的外观信息，把元素的外观绘制出来，不影响布局

5.何时触发重绘

• 字体，背景颜色改变
• 元素阴影改变

6.回流会导致重绘，重绘不会导致回流。回流会导致页面重排，影响性能。