浏览器的渲染过程

一、渲染过程

1.解析HTML文档，构建DOM tree;

2.解析CSS文件，构建CSSOM tree;

3.合并DOM tree和CSSOM tree，生成render tree；

4.开始布局，计算每个节点的位置信息；

5.将render tree每个节点绘制显示出来。

二、具体流程

1、解析HTML生成DOM tree

在浏览器接收到服务器响应来的HTML文档之后，会遍历文档节点，生成DOM tree。但是DOM tree的生成过程中可能会被CSS和JS的加载执行阻塞。

2、解析CSS生成CSSOM tree

浏览器解析CSS文件生成CSSOM tree，每个CSS文件都被分析成StyleSheet对象，每个对象都包含CSS规则，CSS规则包括选择器、一条或多条声明。

3、将DOM tree和CSSOM tree合并在一起生成render tree

通过DOM tree和CSSOM tree可以合成render tree。浏览器会先从DOM tree的根节点开始遍历每一个可见节点，然后找到与每一个可见节点适配的样式并进行应用。
对于不可见的元素，它们是不会出现在render tree上的，但是visibility为hidden的元素会出现这颗树上。

4、遍历render tree开始布局，计算每个节点的位置大小信息

布局阶段会从render tree的根节点开始遍历，然后确定每个节点在页面上的位置和大小，最后输出一个盒子模型，它会精确的捕获每个节点在屏幕上的确切位置和大小。

5、将render tree每个节点绘制显示出来

绘制阶段会遍历render tree，调用渲染器的paint()方法在屏幕显示内容。
render tree的绘制工作是由浏览器的UI后端组件完成的。

渲染阻塞:

浏览器解析文档，当遇到