【读书笔记】--浏览器工作原理与实践（浏览器渲染流程）

回顾上一节内容：

在HTML页面内容被提交给渲染引擎之后，渲染引擎首先将HTML数据解析为浏览器能理解的DOM，然后根据CSS样式表，计算出DOM所有节点的样式，然后计算出每个DOM元素的位置，并将这些保存到布局树上。

一、分层

浏览器的页面实际上被分成了很多图层，这些图层叠加后合成了最终的页面。通常情况下，并不是所有布局树的每个节点都包含一个图层，如果一个节点没有对应的图层，呢么这个节点就从属于父节点的图层。

什么情况下，渲染引擎为节点创建新的图层？满足下面两个条件之一，就会被提升为单独的一个图层。

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

明确定位属性的元素、定义透明属性的元素、使用CSS滤镜的元素等，都拥有层叠上下文属性。

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

二、图层绘制

完成图层的构建后，渲染引擎会对图层树中每个图层进行绘制。渲染引擎实现图层的绘制与之类似，会把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表。

三、栅格化

绘制列表只是用来记录绘制顺序和指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。栅格化过程都会使用GPU来加速生成，使用GPU生成位图的过程叫快速栅格化，或者GPU栅格化，生成的位图被保存在GPU内存中。

四、合成和显示

一旦所有的图块都被光栅格化，合成线程就会生成一个绘制图块的命令--“DrawQuad”，然后将该命令提交给浏览器进程。浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的DrawQuad命令，然后根据DrawQuad命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

总结：

整个渲染流程包括，从HTML到DOM，样式计算，布局，图层，绘制，光栅化，合成显示。

整个流程的文字描述：

1）渲染进程将HTML解析为DOM树

2）渲染引擎将CSS样式解析为浏览器可以理解的stylesheets，计算出DOM的节点样式

3）创建布局树，计算布局信息

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

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

6）合成线程将图层分成图块，并在光栅格化线程池中将图块转换成位图。

7）合成线程发送绘制图块命令DrawQuad给浏览器进程。

8）浏览器进程根据DrawQuad消息生成页面，并显示到显示器上