Web页面渲染及合成加速（一）

原文出处：/article/8357104.html

1. 渲染概述

一个网页通常可以包含很多层(该层并不完全等同于RenderLayer)，例如有透明效果的节点， Canvas节点等，这些节点都可以是页面中的一层，这些层的内容最后组成一个可视化的网页内容，如下图所示。



在这里稍微解释一下Layer的概念，我们都知道WebCore中的三棵树：DOM树，Render树及RenderLayer树。事实上远不止这三棵树，在开启硬件加速的情况下，WebView会构成一棵与RenderLayer树结构并行的Layer树，通常RenderLayer树中的一个或多个节点对于Layer树中的一个节点。这才是上图中的Layer的含义。
Layer类是一个基类，BaseLayerAndroid和LayerAndroid类继承于它。Layer树中BaseLayerAndroid为根，其代表最大的surface，通常是一个普通的web页面，比如上图中的Layer1；Layer树中其他节点为LayerAndroid，它代表一些特殊的surface，如video，插件等，比如上图中的其他Layer。关于这两个类的具体内容在第四节介绍。
在没有硬件加速的情况下，浏览器通常是依赖于CPU来渲染生成网页的内容，大致的做法是遍历这些层，然后按照顺序把这些层的内容依次绘制在一个内部存储空间上（例如bitmap），最后把这个内部表示显示出来，这种做法就是软件渲染（softwarerendering）。
随着GPU硬件能力的增强，包括在很多小型设备上也是如此，浏览器可以借助于其处理图形方面的性能来对渲染实现加速。此时不再将所有层绘制到一起，而是进行分层渲染，合成之后再显示到屏幕上。
整个渲染过程基本上可以分为相对独立的三个步骤：
– Layers Sync
– Layers Draw to BackingStore
– Compositing Backing Store to Window byWebView
下面详细介绍这三个步骤。

2. LayersSync及WebKit支持

2.1 LayerSync

该步骤即WebCore更新自己的树结构的过程，在这里不在赘述。

2.2 WebKit支持

开启硬件加速后，WebKit有几个重要的类为硬件加速提供支持，在这里首先介绍一下，它们的具体作用在下文中会有详细介绍。

2.2.1 GraphicsLayer类

该类是一个抽象类，用于表示有后端存储（backing store）的渲染surface，同时，也包括作用于之上的各种变换（transformation）和动画（animation）。在android平台下的实现类为GraphicsLayerAndroid，此类中包含一个LayerAndroid，而真正进行合成的一般是LayerAndroid。

GraphicsLayerAndroid会构成一个跟RenderLayer结构并行的树结构，称之为GraphicsLayer树。而LayerAndroid所属的Layer树也是一个与GraphicsLayer树并行的结构（在第一节已经介绍过）。实际上RenderLayer树，GraphicsLayer树，Layer树依次关联起来。

2.2.2 RenderLayerBacking类

每个RenderLayer创建一个RenderLayerBacking，它用来管理和控制相对应的RenderLayer的合成行为，包含很多GraphicsLayer对象，这些对象用于表示层内容，前景（foreground）内容等等

2.2.3 RenderLayerCompositor类

WebKit中渲染部分‘掌控大局’的类， 管理RenderLayer树结构，它通过浏览器的设置来决定是否创建RenderLayer以及是否硬件加速合成，同时也决定是否为RenderLayer创建RenderLayerBacking

2.2.4 GraphicsLayerClient类

该类是一个提供给GraphicsLayer的回调接口，GraphicsLayer主要通过这个回调接口：

– notifyAnimationStarted - 通知页面该Layer启动一个CSS动画，用于实现硬件加速的CSS动画

– notifySyncRequired - 通知页面该Layer的样式属性被改变，需要重新渲染和混合

– paintContents - 把对应的RenderLayer上的内容绘制到自身内部的Backing Surface上

2.2.5 GraphicsContext类

该类在android下的实现为GraphicsContextAndroid，它负责最终绘制到后端存储（backing store）

几个主要类的关系图如下所示：