浏览器渲染页面的流程

不同浏览器有不同的渲染引擎,比如Firefox使用Gecko,而Safari和Chrome使用webkit

1. 解析HTML生成DOM树

在生成DOM树的过程中会被CSS和JS的加载执行阻塞,也就是渲染阻塞
渲染阻塞:当浏览器遇到<script>标记,DOM暂停构建,直到脚本执行完成,然后继续构建,如果JS脚本还操作了CSSOM,正好这个CSSOM还没有下载和构建,浏览器会延迟执行脚本和构建DOM,直到完成CSSOM的下载和构建

2. 解析CSS生成CSSOM规则树

对于外部CSS文件,每个CSS文件都会被解析成StyleSheet对象,每个对象都包含CSS规则

3. 将DOM树与CSSOM规则树合并在一起生成渲染树

浏览器会从DOM树的根节点开始遍历每个可见节点,对每个可见节点找到对应的css样式规则并应用

4. 遍历渲染树开始布局,计算每个节点的位置大小信息

布局阶段会从渲染树的根节点开始遍历,然后确定每个节点对象在页面上的确切大小和位置,输出一个盒模型

5. 将渲染树每个节点绘制到屏幕

渲染树绘制,调用渲染器的paint()方法,是由浏览器的UI后端组件完成的
根据浏览器布局,计算CSS样式,即每个节点在页面的大小和位置等集合信息.这里涉及到两个概念:repaint(重绘)和reflow(回流)
点击详细了解回流和重绘