浏览器内核——渲染引擎：从html到图像展示

浏览器最核心的部分是渲染引擎，即render engine，又称浏览器内核。

渲染引擎包括多个线程，每个线程负责相关工作，如下：

• GUI 渲染线程负责调用GPU进行界面渲染，包括解析html、CSS、构建dom树、cssom、layout、layer等。
• JavaScript引擎线程负责执行网页中的js脚本，值得注意的是，js引擎线程与GUI线程是互斥的，因此在某些网页上，当js操作时间较长时，会出现画面卡顿；
• 事件触发线程负责将所有的事件放入事件处理队列，等待js脚本依次执行；
• 定时器触发线程负责管理setIntervel和setTime的定时事件，定时事件触发之后同样放入事件处理队列中；
• http异步请求线程管理http连接，如连接状态出现变化则进行相应的处理；

渲染过程

简单来说，从浏览器接收数据流到展示界面主要有以下几个步骤：

1. 构建DOM树
2. 样式计算
3. 布局
4. 分层
5. 绘制
6. 分块
7. 光栅化
8. 合成

构建DOM树

样式计算（CSSOM）

该过程主要处理CSS代码，生成CSSOM对象模型。

生成布局树（Layout）

如果说CSSOM步骤是为了确定某一对象的样式，那么Layout阶段就是确定某一对象处于图像的具体位置。

在DOM树上不可见的元素，如head、meta或display：none的元素都不会出现在Layout上。

分层（Layer）

Layer是为了处理不同的Layout之间相互覆盖的情况下谁上谁下的问题。

绘制（绘制列表）

当完成上述步骤之后，终于可以开始图像绘制。

渲染引擎会将一个图像拆分为很多简单的绘制列表：

分块（合成线程）

考虑到首页的即时显示以及渲染的效率，渲染引擎对图像的绘制是分块进行的，这部分工作统一由合成线程进行处理。

图层会被分割为较小的图块，256*256/512*512等大小。

合成线程在进行绘制时，会首先对处于当前视图或附近的图块进行渲染。

光栅化（位图）

所谓光栅化，即是将图块转化为位图，这个步骤一般会利用GPU进行加速，因此这个步骤又称为GPU栅格化或快速栅格化。

生成的位图随后被返还给合成线程，由合成线程进行实际的绘制DrawQuad。

那么显示器是如何显示图像的呢？

无论是 PC 显示器还是手机屏幕，都有一个固定的刷新频率，一般是 60 HZ，即 60 帧，也就是一秒更新 60 张图片，一张图片停留的时间约为 16.7 ms。而每次更新的图片都来自显卡的前缓冲区。而显卡接收到浏览器进程传来的页面后，会合成相应的图像，并将图像保存到后缓冲区，然后系统自动将前缓冲区和后缓冲区对换位置，如此循环更新。