HTML文档是怎么转换成页面的

---

先上图

一、HTML解析器将HTML转成DOM树

可以看到输入是HTML文档，输出是DOM树，DOM树包含节点和内容，以及各个节点之间的关系是树的关系。

我们可以结合网页分析一下：

在开发者工具打开console,输入document,可以看到document包含的内容，这就是一个完整的DOM树结构，并且我们可以对个DOM树进行查询和操作，比如改变DOM节点。

如我们执行：document.getElementsByTagName("p")[0].innerText = "black"页面效果将变成：

二、CSS解析器将CSS转换成styleSheets

我们写的CSS浏览器并不能理解，所有需要将CSS转换成浏览器可以理解的结构：
那CSS来源有哪些呢，我们知道，我们平时写作

计算每个节点的样式 Render Tree

使用CSS的继承性和层叠规则，DOM元素中的每个节点的样式将会被计算出来，可以通过控制台 style computed 查看每个节点对应的完整的样式

有了样式之后，我们还需要知道每个节点的位置，大小，下面是另一个阶段：

三、布局

这个阶段主要是计算出DOM树中可视节点的几何大小以及空间位置，为后面的绘制提供基础。

创建布局树

首先也会用一个树结构来存储布局信息，成为布局树

可以看出，对于head,link,display等不会展示在页面中的节点并不会包含在内，只会包含与页面展示依赖的节点。

布局计算

接下来就是进行布局计算，主要根据样式计算出节点在页面中的坐标系，大小等。
我们知道了元素的位置是不是就可以之间绘制了呢，不是的，因为存在复杂的布局，还需要将其进行分层处理，将复杂的页面分成不同的图层，再对每个图层进行绘制再合成。

四、分层

接下来就是分层啦，哪些情况会导致分层呢？我们可以在控制台 layer 中查看当前页面有哪些层，

下面就揭晓导致分层的因素，用一张图来表示吧

从图中可以看出，明确定位属性的元素、定义透明属性的元素、使用CSS滤镜的元素等，z-index 指明都拥有层叠上下文属性。
还有，需要剪裁的地方也会形成图层，

出现这种裁剪情况的时候，渲染引擎会为文字部分单独创建一个层，如果出现滚动条，滚动条也会被提升为单独的层。你可以参考下图

图层准备好了，接下来就是图层绘制啦

五、图层绘制

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

你也可以打开“开发者工具”的“Layers”标签，选择“document”层，来实际体验下绘制列表，如下图所示：

六、栅格化

我们知道，一个图层可能很大，超出了我们的可视区域内，那这些区域是不是得全部绘制出来呢，答案是否定的，为了减小开销，合成线程会将图层划分为图块（tile），这些图块的大小通常是256x256或者512x512，如下图所示：

然后合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。而图块是栅格化执行的最小单位。

七、合成和显示

一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。

浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的DrawQuad命令，然后根据DrawQuad命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

到这里，经过这一系列的阶段，编写好的HTML、CSS、JavaScript等文件，经过浏览器就会显示出漂亮的页面了。

---

总结

好了，我们现在已经分析完了整个渲染流程，从HTML到DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。下面我用一张图来总结下这整个渲染流程：

结合上图，一个完整的渲染流程大致可总结为如下

• 渲染进程将HTML内容转换为能够读懂的DOM树结构。
• 渲染引擎将CSS样式表转化为浏览器可以理解的styleSheets，计算出DOM节点的样式。
• 创建布局树，并计算元素的布局信息。
• 对布局树进行分层，并生成分层树。
• 为每个图层生成绘制列表，并将其提交到合成线程。
• 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
• 合成线程发送绘制图块命令DrawQuad给浏览器进程。
• 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上
  后续再增加可以提升浏览器性能的因素啦。