浏览器的渲染过程

一、浏览器渲染的过程主要包括以下五步：

1.浏览器将获取的HTML文档解析成DOM树。

2.处理Css标记，构成层叠样式表模型CSSOM(CSS Object Model)。

3.将DOM和CSSOM合并为渲染树，代表一系列将被渲染的对象。

4.渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次pass绘制操作就可以布局所有的元素。

5.将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

二、具体流程步骤：

1.构建DOM树

• 当客户端从服务器接受到HTML文档之后，就会生成DOM树，DOM树和HTML标签一一对应。

• 注意：

  （1）DOM树在构建的过程中可能会被CSS和JS的加载而执行阻塞。

  （2）display:none 的元素也会在DOM树中。

  （3）注释也会在DOM树中。

  （4）script标签会在DOM树中。

2.Css解析

• 浏览器会解析Css文件并生成Css规则树，在这个过程中每个Css文件都会被分析成StyleSheet对象，每个对象都包括CSS规则，CSS规则对象包括对应的选择器和声明对象以及其他对象。

• 注意：

  （1）Render Tree和DOM Tree不完全对应。

  （2）display: none的元素不在Render Tree中。

  （3）visibility: hidden的元素在Render Tree中。

3.构建渲染树

• 通过DOM树和CSS规则树，浏览器就可以通过它两构建渲染树了。浏览器会先从DOM树的根节点开始遍历每个可见节点，让后对每个可见节点找到适配的CSS样式规则并应用。

• 注意：

  （1）Render Tree和DOM Tree不完全对应。

  （2）display: none的元素不在Render Tree中。

  （3）visibility: hidden的元素在Render Tree中。

4.渲染树布局

• 布局阶段会从渲染树的更节点开始遍历，由于渲染树的每个节点都是一个Render Object对象，包含宽高，位置，背景色等样式信息。所以浏览器就可以通过这些样式信息来确定每个节点对象在页面上的确切大小和位置，布局阶段的输出就是我们常说的盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。

• 注意：

  （1）float元素，absoulte元素，fixed元素会发生位置偏移。

  （2）我们常说的脱离文档流，其实就是脱离Render Tree。

5.渲染树绘制

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