Chrome页面渲染的GPU加速技术 - 基础：WebKit软件渲染模式

参考来源：http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

WebKit的渲染引擎代码非常复杂，文档又比较欠缺。为了易于理解Chrome中GPU加速渲染的工作原理，最好先了解一下WebKit如何来渲染页面的。
我们先从非GPU加速的渲染来进行介绍，然后在此基础上再说GPU发挥了什么作用。

1. 节点（Nodes）和DOM树

在WebKit中，网页内容是通过由一些节点（Node）组成的树型结构组织在一起的，被称作DOM树。页面中的每个HTML元素以及元素携带的数据被保存在一个节点（Node）中。
DOM树中，最根部的节点（Node）总是一个Document节点。

2. 节点（Nodes）与渲染对象（RenderObjects）

DOM树中每个可以显示的节点（Node），都对应一个渲染对象（RenderObject），渲染对象被存储在一个有层级的树形结构中，叫做渲染树（Render Tree）。
一个渲染对象知道如何绘制其对应的节点到画布上，它对图形环境（GraphicsContext）执行一系列绘图操作，然后由图形环境（GraphicsContext）将绘图产生的像素值映射到显示屏幕上。

在Chrome中，2D图形环境（GraphicsContext）封装在Skia库中，大部分的绘图调用，都是针对SkCanvas或者SkPlatformCanvas的（详细内容请参考Chrome Skia）。

在软件渲染模式下，整个页面只需要一个图形环境（GraphicsContext），所有的渲染对象（RenderObject）都对它进行绘制。

3. 渲染对象（RenderObjects）与渲染图层（RenderLayers）

每个渲染对象（RenderObject）都有其对应的渲染图层（RenderLayer），或者是直接关联，或者是通过其根对象（其根级RenderObject）间接关联。

一般来讲，拥有相同坐标空间（如受控于相同的CSS变换）的渲染对象会属于同一个渲染图层。渲染图层可以保证渲染对象在重叠、半透明等情况时，能以正确层叠次序进行绘制。
RenderBoxModelObject::requiresLayer()中定义了一些为渲染对象创建新渲染图层的前提条件，如：

 * 渲染对象是页面的根对象；
 * 渲染对象有独立的CSS定位属性（相对、绝对、变换）；
 * 渲染对象是透明的；
 * 覆盖有透明（Alpha）蒙版或者反射层；
 * 有CSS效果滤镜；
 * 该渲染对象对应于标签指定的WebGL或者2D加速图形元素；
 * 该渲染对象对应于