创建布局树后，经过布局计算，我们得到了一个需要渲染的所有节点组成的树状结构，包含计算出的每个节点的坐标位置。
下面，就需要去实际地绘制。
注：浏览器渲染是在浏览器渲染进程进行的。其中，浏览器渲染进程分为多个线程。从解析 HTML 和 CSS 到布局计算都是在主线程进行的。
一、分层
我们看到的网页是二维的，但事实上，为了实现页面上一些复杂的效果，浏览器会将页面划分为不同的图层，根据不同属性的优先级，将它们划分在不同的图层。
也就是说，我们看到的网页，实际上是三维的。
一层层的图层叠放在一起，构成了我们最终看到的网页。这也是 CSS 叫做层叠样式表的原因。
在这一阶段，输入的是带有坐标位置的布局树，输出的是图层树（layerTree）。
那么，浏览器是如何判断图层划分的呢？
- 首先，所有的节点都直接属于或间接属于一个图层
- 浏览器会为符合某一些条件的节点创建图层
浏览器会为哪些节点创建图层呢？
- 拥有层叠上下文属性的元素：
- position元素
- 设置透明度的元素
- 使用 CSS 滤镜的元素
等等。。。。
- 需要剪裁的地方：
若一段文本的长度超出了它的父容器的大小，则文本会被剪裁，这时，渲染引擎会为文字部分单独创建一个图层。
若出现滚动条，滚动条也会被创建单独的图层。
二、图层绘制
拿到了图层树，需要进行具体的绘制。怎么做呢？
先要把每个图层需要绘制的部分拆分成很多小的绘制指令，然后把这些指令按照顺序组成一个待绘制列表
在这一阶段，输入的是图层树，输出的是待绘制列表
三、栅格化操作
拆分为绘制指令后，就要进入真正的绘制工作了。
以上的步骤都是在渲染进程的主线程里进行的，而真正的绘制工作则是在合成线程里进行的。
上一步得到的待绘制列表，会被提交到合成线程，进行绘制。
合成线程如何绘制呢？
- 首先，我们看到的网页大多很长，需要拖动滚动条查看。实际上我们看到的网页，只是一个视口(viewport)的大小。
- 所以，如果一次性将全部的网页都绘制了，会耗费很多资源，因为我一次性看不了那么多
- 因此，合成线程将图层划分为图块，然后按照视口附近的图块优先生成位图。栅格化指将图块转换成位图。
四、合成和显示
当所有图块都被栅格化，合成线程会发送指令给浏览器进程。浏览器进程会将页面内容绘制到内存里，再将内存显示在屏幕上
至此，就渲染完成了
