1.浏览器渲染元素的过程
- 解析获取到的HTML,生成DOM树,解析CSS,生成CSSOM树
- 将DOM树和CSSOM树进行结合,生成渲染树
- 根据生成的渲染树,进行回流,根据元素的几何信息,将其安放在页面中的正确位置
- 回流之后进行重绘,根据元素的外观信息,把元素的外观绘制出来
- 展示在页面上
2.回流
因为元素的几何信息改变,页面需要重新布局,这就称为回流。页面每次至少会发生一次回流,就是在页面第一次渲染的时候。
3.何时触发回流
- 添加,删除元素
- 元素的位置改变
- 元素的大小改变(包括外边距、内边距、边框大小等)
- 页面第一次渲染
- 浏览器窗口的大小改变
4.重绘
根据元素的外观信息,把元素的外观绘制出来,不影响布局
5.何时触发重绘
- 字体,背景颜色改变
- 元素阴影改变