Chromium网页Graphics Layer Tree创建过程分析

《Chromium网页Graphics Layer Tree创建过程分析》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Chromium网页GraphicsLayerTree创建过程分析在前面一文中，我们分析了网页RenderLayerTree的创建过程。在创建RenderLayer的同时，WebKit还会为其创建GraphicsLayer。这些GraphicsLayer形成一个GraphicsLayerTree。GraphicsLayer可看作是一个图形缓冲区，被若干RenderLayer共用。本文接下来就分析GraphicsLayerTree的创建过程。网页的RenderLayerTree与GraphicsLayerTree的关系可以通过图1描述，如下所

2、示：在WebKit中，GraphicsLayer又称为CompositedLayer。我们可以将GraphicsLayer看作是CompositedLayer的一种具体实现。这种具体实现是由WebKit的使用者Chromium提供的。CompositedLayer描述的是一个具有后端存储的图层，因此可以将它看作是一个图形缓冲区。在软件渲染方式中，这个图形缓冲区就是一块系统内存；在硬件渲染方式中，这个图形缓冲区就是一个OpenGL里面的一个FrameBufferObject（FBO）。CompositedLayer涉及到的一个重要概念是“La

3、yerCompositing”。LayerCompositing是现代UI框架普遍采用的一种渲染机制。例如，Android系统的UI子系统（SurfaceFlinger）就是通过CompositingSurface来获得最终要显示在屏幕上的内容的。这里的Surface就相当于是Chromium的Layer。关于Android系统的SurfaceFlinger的详细分析，可以参考这个系列的文章。LayerCompositing的三个主要任务是：1.确定哪些内容应该在哪些CompositedLayer上绘制；2.绘制每一个CompositedL

4、ayer；3.将所有已经绘制好的CompositedLayer再次将绘制在一个最终的、可以显示在屏幕上进行显示的图形缓冲区中。其中，第1个任务它完成之后就可以获得一个GraphicsLayerTree，第3个任务要求按照一定的顺序对CompositedLayer进行绘制。注意，这个绘制顺序非常重要，否则最终合成出来的UI就会出现不正确的Overlapping。同时，这个绘制顺序对理解GraphicsLayerTree的组成也非常重要。因此，接下来我们首先介绍与这个绘制顺序有关的概念。为了方便描述，本文将上述绘制顺序称为CompositedL

5、ayer的绘制顺序。在介绍CompositedLayer的绘制顺序之前，我们还需要回答一个问题：为什么要采用LayerCompositing这种UI渲染机制？主要有两个原因：1.避免不必要的重绘。考虑一个网页有两个Layer。在网页的某一帧显示中，Layer1的元素发生了变化，Layer2的元素没有发生变化。这时候只需要重新绘制Layer1的内容，然后再与Layer2原有的内容进行Compositing，就可以得到整个网页的内容。这样就可以避免对没有发生变化的Layer2进行不必要的绘制。2.利用硬件加速高效实现某些UI特性。例如网页的某一

6、个Layer设置了可滚动、3D变换、透明度或者滤镜，那么就可以通过GPU来高效实现。在默认情况下，网页元素的绘制是按照RenderObjectTree的先序遍历顺序进行的，并且它们在空间上是按照各自的display属性值依次进行布局的。例如，如果一个网页元素的display属性值为"inline"，那么它就会以内联元素方式显示，也就是紧挨在前一个绘制的元素的后面进行显示。又如，如果一个网页元素的display属性值为"block"，那么它就会以块级元素进行显示，也就是它的前后会各有一个换行符。我们将这种网页元素绘制方式称为NormalFlo

7、w或者InFlow。有默认情况，就会有例外情况。例如，如果一个网页元素同时设置了position和z-index属性，那么它可能就不会以InFlow的方式进行显示，而是以OutofFlow的方式进行显示。在默认情况下，一个网页元素的position和z-index属性值被设置为“static”和"auto"。网页元素的position属性还可以取值为“relative”、“absolute”和“fixed”，这一类网页元素称为Positioned元素。当一个Positioned元素的z-index属性值不等于"auto"时，它就会以Outo

8、fFlow的方式进行显示。CSS2.1规范规定网页渲染引擎要为每一个z-index属性值不等于"auto"的Positioned元素创建一个StackingContext。对于其