航被提交后又会怎么样呢？就进入了渲染阶段。这个阶段很重要，了解其相关流程能让你“看透”页面是如何工作的，有了这些知识，你可以解决一系列相关的问题，比如能熟练使用开发者工具，因为能够理解开发者工具里面大部分项目的含义，能优化页面卡顿问题，使用 JavaScript 优化动画流程，通过优化样式表来防止强制同步布局，等等。
由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线，其大致流程如下图所示：
按照渲染的时间顺序，流水线可分为如下几个子阶段：
构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。
内容比较多，我会用两篇文章来为你详细讲解这各个子阶段。
接下来，在介绍每个阶段的过程中，你应该重点关注以下三点内容：
- 开始每个子阶段都有其输入的内容；
- 然后每个子阶段有其处理过程；
- 最终每个子阶段会生成输出内容。
理解了这三部分内容，能让你更加清晰地理解每个子阶段。
构建 DOM 树
浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。
DOM 和 HTML 内容几乎是一样的，但是和 HTML 不同的是，DOM 是保存在内存中树状结构，可以通过 JavaScript 来查询或修改其内容。
生成 DOM 树了，但是 DOM 节点的样式我们依然不知道，要让 DOM 节点拥有正确的样式，这就需要样式计算了。
样式计算
样式计算的目的是为了计算出 DOM 节点中每个元素的具体样式，这个阶段大体可分为三步来完成。
布局阶段
有 DOM 树和 DOM 树中元素的样式，但这还不足以显示页面，因为我们还不知道 DOM 元素的几何位置信息。那么接下来就需要计算出 DOM 树中可见元素的几何位置，我们把这个计算过程叫做布局。
分层
经过了构建DOM树，计算样式和布局，浏览器仍然不能直接绘制页面。
页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。
如果你熟悉 PS，相信你会很容易理解图层的概念，正是这些图层叠加在一起构成了最终的页面图像。
浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。
**
下面我们再来看看这些图层和布局树节点之间的关系，如文中图所示：
绘制
分块
光栅化和合成
小结
渲染流水线，即渲染过程可以分为这几个阶段：
构建DOM树、样式计算
在有的文章中是这么分的：
DOM树，CSS树，布局树，render，分层，绘制。
正确的流程是：
- 渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构
- 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式
- 创建布局树，并计算元素的布局信息
- 对布局树进行分层，并生成分层树
- 为每个图层生成绘制列表，并将其提交到合成线程
- 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图
- 合成线程发送绘制图块命令 DrawQuad 给浏览器进程
- 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上
**
若有收获，就点个赞吧
0 人点赞
