Chromium网页渲染机制介绍

　　作为一个浏览器，快速地将网页渲染出来是最重要的工作。Chromium为了做到这一点，费尽了心机，做了大量优化工作。这些优化工作是卓有成效的，代表了当今最先进的网页渲染技术。值得一提的是，这些渲染技术不仅适用于网页渲染，也可以应用在原生系统的UI渲染上。例如，在Android系统上，我们就可以看到两者在渲染技术上的相似之处。本文接下来就对Chromium的网页渲染机制进行简要介绍，并且制定学习计划。

　　Chromium的网页渲染机制可以用八个字来描述：纵向分层，横向分块。其中，分层是由WebKit完成的，就是把网页抽象成一系列的Tree。Tree由Layer组成，Layer就是我们所说的层。从前面Chromium网页加载过程简要介绍和学习计划这个系列的文章可以知道，WebKit为网页依次创建了DOM Tree、Render Object Tree、Render Layer Tree和Graphics Layer Tree四棵Tree。其中，与渲染相关的是后面三棵Tree。将网页进行分层，好处有两个。一是减少不必要的绘制操作，二是利用硬件加速渲染动画。

　　第一个好处得益于WebKit将网页一帧的渲染分为绘制和合成两个步骤。绘制是将绘图操作转化为图像的过程，合成是将所有图像混合在一起后显示在屏幕上的过程。注意，对于屏幕来说，不管它某一个区域的内容是否发生变化，在它的下一帧显示中，总是需要进行刷新的。这意味着系统总是需要给它一个完整的屏幕内容。考虑这样的一个网页全屏显示的场景，并且网页被抽象为两个层。在下一帧显示中，只有一个层的内容发生了变化。这时候，只需要对内容发生变化的层执行绘制操作即可，然后与另一个层上一帧已经绘制得到的图像进行合成就可以得到整个屏幕的内容。这样就避免了不必要的绘制操作，额外付出的代价是一个合成操作。但是请注意࿰