渲染流程（上）

我们已经明白导航相关的内容了，现在我们来解决上一节留下的问题，渲染阶段具体会做什么

也就是说，我们来了解一下HTML、CSS、JS怎么转化成页面

由于渲染过程过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的HTML经过这些子阶段，最后输出像素，这么一个处理流程叫做渲染流水线，大致流程如下：

渲染流水线.png

流水线可以分为8个子阶段：构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成

每一个阶段我们需要关注以下三点内容：

开始每个子阶段都有其输入的内容
然后每个子节点都有其处理过程
最终每个子阶段都会生成输出内容

构建DOM树

由于浏览器无法直接理解和使用HTML，所以需要将HTML转化为浏览器能够理解的结构——DOM树

DOM的构建过程可以参考下图例子：

DOM树的构建过程.png

样式计算

这个阶段的目的是为了计算出DOM节点中每个元素的具体样式

把CSS转化成浏览器能够理解的结构

首先，我们回忆一下样式的三种引入方法：

通过link引用的外部CSS文件
<style>标记内的 CSS
元素的style属性内嵌的CSS

和HTML一样，浏览器也无法直接理解这些纯文本的CSS样式，所以当渲染器引擎接收到CSS的时候，会执行转化操作，将CSS转化为浏览器能够识别的结构——styleSheets

可以在控制台输入document.styleSheets查看CSS结构

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

属性值标准化就是将各种属性值统一化成浏览器能够理解的计算值

比如2em、blue这些类型的数值，渲染引擎难以理解，所以统一转化成容易理解的、标准的计算值32px rgb(0, 0, 255)

这个过程就是属性值标准化

计算出DOM树每个阶段的具体样式

现在属性已经被标准化了，接下来需要计算DOM树中每个结点的样式属性

这主要涉及到CSS的继承规则和层叠规则

首先是CSS的继承，CSS继承就是每个DOM节点都包含有父节点的样式

接下来是CSS的层叠，他是一个定义了如何合并来自多个源的属性值的计算

总之，样式计算阶段的目的是为了计算出DOM节点中每个元素的具体样式，在计算过程中需要遵守CSS的继承规则和层叠规则

这个阶段的输出内容是每个DOM节点的样式，并保存在ComputedStyle的结构中

DOM中的样式表.png

布局阶段

现在我们已经有DOM树和DOM树中元素的样式了，但是这样还不足以渲染页面，我们不知道DOM元素的具体几何位置

这个阶段我们就要计算出DOM树中可见元素的几何位置，这个计算过程叫做布局

布局阶段可以分为两个部分：创建布局树和布局计算

创建布局树

由于DOM树中可能存在不可见元素，比如<head>标签，display:none属性的元素，所以显示之前，我们需要额外的构建一颗只包含可见元素的布局树

可见布局树.png

可见，DOM树中所有不可见的节点都没有包含到布局树中

简单来说，浏览器完成了以下的工作：

将DOM树中的所有可见节点加到布局中
不可见的节点会被布局树忽略掉

布局计算

在执行布局操作的时候，会把布局运算的结果重新写回布局树中，所以布局树既是输入内容也是输出内容

具体计算后续再进行分析

05-渲染流程（上）