浏览器渲染流程

渲染流程：构建 DOM 树、样式计算、布局阶段、分层、绘制、光栅化和合成。

构建 DOM 树

这是因为浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构—— DOM 树。

Dom tree

DOM树构建过程⽰意图

样式计算

当渲染引擎接收到 CSS 文本时，会执行⼀个转换操作，将 CSS 文本转换为浏览器可以理解的结构—— styleSheets；

css 的来源只要有三种：通过link引用的外部 CSS 文件；<style > 标签内的 CSS；元素的 style 属性内嵌的 CSS。

样式计算的目的是为了计算出 DOM 节点中每个元素的具体样式，这个阶段可以分为三步来完成：

1. 把 CSS 转换为浏览器能够理解的结构；

2. 转换样式表中的属性值，使其标准化，比如 2em 解析文 32px， color:green 解析为 rpg；

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

这就涉及到 CSS 的 继承规则 和 层叠规则 了

继承规则 ：CSS 继承就是每个 DOM 节点都包含有父节点的样式；

层叠规则：层叠是 CSS 的⼀个基本特征，它是⼀个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称“层叠样式表”正是强调了这⼀点。

样式计算

计算后DOM的样式

布局阶段

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

Chrome 在布局阶段需要完成两个任务：创建布局树 和 布局计算。

创建布局树的过程：

遍历DOM树中的所有 可见节点，并把这些节点加到布局中；

而不可见的节点会被布局树忽略掉，如 head 标签下面的全部内容， body.p.span 这个元素，因为它的属性包含 dispaly:none，所以这个元素也没有被包进布局树。

布局树构造过程⽰意图

分层

页⾯中有很多复杂的效果，如⼀些复杂的3D变换、页面滚动，或者使用 z-indexing 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成⼀棵对应的图层树（LayerTree）。

浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。

layout tree

布局树和图层树关系⽰意图

并不是布局树的每个节点都包含⼀个图层，如果⼀个节点没有对应的层，那么这个节点就从属于父节点的图层。

如何创建层？

1 拥有层叠上下⽂属性的元素会被提升为单独的⼀层，比如明确定位属性的元素（position）、定义透明属性的元素、使⽤CSS滤镜的元素等，参考层叠上下文；

2 需要剪裁（clip）的地方也会被创建为图层。

图像绘制

渲染引擎实现图层的绘制会把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成⼀个待绘制列表。

我们可以通过开发工具来查看。

Layers

图像绘制

光栅化

绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。

当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程。

渲染进程中的合成线程和主线程

合成线程会按照视口（用户能看到的那部分叫视口 viewport）附近的图块（合成线程会将图层划分为图块 tile）来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化是指将图块转换为位图，简单来说就是我们需要做的是把这些信息转化为 显示器中的像素，这个转化的过程，叫做光栅化。