渲染流程-html、CSS、JS如何变成页面

一、构建DOM树

构建DOM树就是将页面中的html标签转换成树形结构的数据。

树形结构的数据的点，称为节点，节点与节点之间形成的关系有：父子节点、兄弟节点。

将HTML标签内容转换为DOM树的HTML文档是HTML解析器。可以在console中输入document来察看DOM树html

二、层叠样式表

1、样式计算：把CSS转换为浏览器能够理解的结构

CSS 样式的引用方式有：

1）通过link引用外部CSS文件

2）<stype>标记的CSS内容

3）元素的style属性内容

将CSS样式转换为styleSheets结构，我们可以通过document.styleSheets 来查看页面的styleSheets结果

2、转换样式表中的属性值，使其标准化

能够作用于一个节点的CSS样式属性非常的多，需要将所有的CSS转换成渲染引擎容易理解、标准化的计算值。

3、计算出DOM树中的每个节点的具体样式

每一个DOM树节点的样式有2种匹配规则：继承+层叠规则

继承是指一部分CSS样式可以通过继承父节点样式作用，例如：font-size、color、font-weigth等；

层叠：层叠是CSS的一个基本特征，定义了如何合并来自多个源的属性值的算法。

可以通过选中页面中的一个元素，然后在computed面签看元素的样式

三、布局

有了上面的DOM树和CSS样式表，接下来还需要计算出DOM树中的可见元素的几何位置，我们把这个计算过程叫做布局。

1、创建布局树：页面中总是有一些标签是不可见的，例如head和一些body中使用display:none的元素。所以在页面显示之前需要创建一个可见元素的布局树。

为了创建布局树，浏览器大概需要遍历DOM树中的所有可见节点，并把这些节点加到布局树中。

2、布局计算：有了布局树之后，需要对布局树中的元素进行位置+大小的计算。

四、分层

页面总是会有很多复杂的功能，例如3D转换、页面滚动等，或者设置了z-index样式，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成图层树（LayerTree）。

并不是每一个DOM树节点都会生成一个layout，有一些dom树节点的layout直接从属其父节点的图层。

如果一个节点满足以下任一点，浏览器会单独为其创建层

1）拥有层叠上下文属性的元素会被提升为单独的一层；

2）需要裁剪的地方会被创建为一层

五、图层绘制：完成图层树后，对图层树进行绘制

六、栅格化：图层绘制列表准备好之后，主线程会把绘制列表提交给合成线程，合成线程将图层划分为图块。然后将这些图块转换为位图，这就是栅格化。

七、合成和显示：合成线程完成后，转到浏览器进程，将显示内容绘制到内存，然后投屏到显示器。

总结：

渲染流程：

1）渲染进程将html内容转换成DOM树；

2）渲染引擎将CSS样式表转换成为styleSheets，并计算出DOM节点的样式；

3）创建布局树，并计算元素的布局信息；

4）布局树进行分层，生成分层树；

5）为每一个图层生成绘制列表，并将其提交到合成线程；

6）合成线程将图层分成图块，并栅格化；

7）合成线程将绘制图块给浏览器进程；

8）浏览器进程生成页面，并显示到显示器上。