流水线可分为如下几个子阶段：构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成
构建DOM树
由于浏览器无法直接理解和使用HTML，所以需要将HTML转换为浏览器可以理解的DOM树。
样式计算
计算出每个DOM节点中每个元素的样式，和HTML一样，浏览器也无法直接理解纯文本的CSS样式，因此当渲染引擎接收到CSS时，会执行一个转换操作。将CSS文本转换为浏览器可以理解的结构StyelSheets
布局阶段
计算出DOM树中可见元素的几何位置，首先要创建布局树和进行布局计算。
- 遍历DOM树中的所有可见节点，忽略一些不可见的节点，并将可见节点加入到布局树中
- 将布局计算结果写入到布局树中
分层
因为页面中有很多复杂的效果，如3D变换、页面滚动、或者做z轴排序等。因此渲染引擎对特定的节点生成专用的图层，并生成一颗对应的图层树。浏览器的页面实际上被分成了很多涂层，最终页面就是这些图层叠加后的效果。
绘制
把图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个带绘制列表
分块
通常有些图层很大，但是通过视口能看到的部分很小，因此要绘制出所有图层内容的话开销会很大。因此，合成线程会将图层划分为图块，然后合成线程会根据视口附近的图块来优先生成位图
光栅化
生成位图的操作是由栅格化来执行的
合成和显示
合成线程发送绘制图块命令DrawQuad给浏览器进程，浏览器进程根据DrawQuad消息生成页面并显示到显示器上
相关概念
- 重排：当改变元素的宽度、高度等，浏览器会触发重新布局，更新完整的渲染流水线。因此开销很大
- 重绘：因为没有改变元素的几何位置 所以将直接进入绘制阶段，因此执行效率会比重排高一些
- 合成：例如通过CSS的transform来实现动画效果，避开了重排和重绘，因此比上面2个执行效率更高
减少重排、重绘相当于减少了渲染进程的主线程和非主线程的很多计算操作，能加快web页面的显示。
