Web页面渲染及合成加速(一)

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)

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


你可能感兴趣的:(webkit)