浏览器在走完导航流程之后，接下来就是渲染阶段，走渲染流程。

渲染流程按照流水线可以分为以下阶段：DOM树构建、样式计算、布局阶段、分层、绘制、分块、栅格化、合成。每个阶段都有自己的输入内容、处理过程和输出结果。

DOM树构建：浏览器并不能直接识别接收到的字节流，所以需要通过HTML解析器来进行一系列解析，转换成浏览器可以识别的结构，这个结构就是DOM树。

样式计算：同样的，浏览器不能直接识别CSS，所以也需要转换成它可以识别的结构。转换过程有以下的步骤：

1.将CSS转换为可以识别的结构CSSOM，可以通过document.styleSheets来获取；

2.转换属性值，使其标准化；如下，渲染引擎对em、bold等属性值并不理解，需要进行转换成标准值；

// 转换前
p {
    font-size: 1em;
    color: blue;
    font-weight: bold;
}

// 转换后
p {
    font-size: 16px;
    color: rgb(0,0,255);
    font-weight: 700;
}

3.根据标准化后的值计算出DOM节点的具体样式；

布局阶段：有了DOM结构和其具体的样式之后，接下来就是要构建可见节点的几何位置，即布局阶段：

1.构建布局树（layoutTree）：遍历DOM树，将可见节点加入到布局中，不可见的（如display: none）不加入；

2.布局计算：计算出每个节点的几何位置；

分层：有了布局树之后，渲染引擎会为布局树的节点创建图层形成一棵图层树（layerTree），但并不会为每个节点创建单独的图层，需满足以下条件之一：

1.拥有层叠上下文属性；如定位属性position、z-index、透明属性opacity、CSS滤镜filter等；

2.需要剪裁的地方；如某容器内文字部分过多超出当前容器，则文字部分会被单独创建一个图层，如果有滚动条，滚动条也是单独的图层；

图层绘制：完成图层树的构建之后，渲染引擎会对每个图层进行绘制。图层绘制这个过程并没有开始真的绘制，而是将图层拆分成一个个绘制指令，按顺序组成一个待绘制列表。

图层分块：有一些图层比较大，远远超过浏览器视口（viewport），一次性渲染会比较耗费性能，所以渲染进程里的合成线程会将图层分成很多的图块。

栅格化：在合成线程将图层分成很多图块之后，栅格化操作就是将视口附近的图块转换成位图。渲染进程维护了一个栅格化线程池，位图的转换就是在线程池里面完成。通常情况栅格化还会在GPU进程里进行，这个过程也叫做GPU栅格化或快速栅格化。

合成：当所有的图层都绘制完成，合成线程会生成一个绘制命令drawQuad给浏览器进程，浏览器进程里有一个Viz组件专门接收该命令然后根据命令绘制内容并最终显示到屏幕。

到此渲染流程就结束了，经过一系列阶段终于把各种资源转换成美观的页面显示在屏幕上，从浏览器的角度出发去看待整个过程，就会对这个过程有更多的了解。