Chromium网页Layer Tree创建过程分析

2325次阅读  |  发布于5年以前

在Chromium中,WebKit会创建一个Graphics Layer Tree描述网页。Graphics Layer Tree是和网页渲染相关的一个Tree。网页渲染最终由Chromium的CC模块完成,因此CC模块又会根据Graphics Layer Tree创建一个Layer Tree,以后就会根据这个Layer Tree对网页进行渲染。本文接下来就分析网页Layer Tree的创建过程。

从前面Chromium网页Graphics Layer Tree创建过程分析一文可以知道,网页的Graphics Layer Tree是根据Render Layer Tree创建的,Render Layer Tree又是根据Render Object Tree创建的。Graphics Layer Tree与Render Layer Tree、Render Layer Tree与Render Object Tree的节点是均是一对多的关系,然而Graphics Layer Tree与CC模块创建的Layer Tree的节点是一一对应的关系,如图1所示:

图1 Graphics Layer Tree与CC Layer Tree的关系

也就是说,每一个Graphics Layer都对应有一个CC Layer。不过,Graphics Layer与CC Layer不是直接的一一对应的,它们是透过另外两个Layer才对应起来的,如图2所示:

图2 Graphics Layer与CC Layer的对应关系

中间的两个Layer分别是WebContentLayerImpl和WebLayerImpl,它们是属于Content层的对象。关于Chromium的层次划分,可以参考前面Chromium网页加载过程简要介绍和学习计划一文的介绍。Graphics Layer与CC Layer的对应关系,是在Graphics Layer的创建过程中建立起来的,接下来我们就通过源码分析这种对应关系的建立过程。

从前面Chromium网页Graphics Layer Tree创建过程分析一文可以知道,Graphics Layer是通过调用GraphicsLayerFactoryChromium类的成员函数createGraphicsLayer创建的,如下所示:

PassOwnPtr<GraphicsLayer> GraphicsLayerFactoryChromium::createGraphicsLayer(GraphicsLayerClient* client)  
    {  
        OwnPtr<GraphicsLayer> layer = adoptPtr(new GraphicsLayer(client));  
        ......  
        return layer.release();  
    }  

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/web/GraphicsLayerFactoryChromium.cpp中。

参数client指向的实际上是一个CompositedLayerMapping对象,这个CompositedLayerMapping对象会用来构造一个Graphics Layer。Graphics Layer的构造过程,也就是GraphicsLayer类的构造函数的实现,如下所示:

GraphicsLayer::GraphicsLayer(GraphicsLayerClient* client)
        : m_client(client)
        , ...... 
    {
        ......

        m_opaqueRectTrackingContentLayerDelegate = adoptPtr(new OpaqueRectTrackingContentLayerDelegate(this));
        m_layer = adoptPtr(Platform::current()->compositorSupport()->createContentLayer(m_opaqueRectTrackingContentLayerDelegate.get()));

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/platform/graphics/GraphicsLayer.cpp中。

GraphicsLayer类的构造函数首先是将参数client指向的CompositedLayerMapping对象保存在成员变量m_client中,接着又创建了一个OpaqueRectTrackingContentLayerDelegate对象保存在成员变量opaqueRectTrackingContentLayerDelegate中。

再接下来GraphicsLayer类的构造函数通过Platform类的静态成员函数current获得一个RendererWebKitPlatformSupportImpl对象。这个RendererWebKitPlatformSupportImpl对象定义在Content模块中,它实现了由WebKit定义的Platform接口,用来向WebKit层提供平台相关的实现。

通过调用RendererWebKitPlatformSupportImpl类的成员函数compositorSupport可以获得一个WebCompositorSupportImpl对象。有了这个WebCompositorSupportImpl对象之后,就可以调用它的成员函数createContentLayer创建一个WebContentLayerImpl对象,并且保存在GraphicsLayer类的成员变量m_layer中。

WebCompositorSupportImpl类的成员函数createContentLayer的实现如下所示:

WebContentLayer* WebCompositorSupportImpl::createContentLayer(
        WebContentLayerClient* client) {
      return new WebContentLayerImpl(client);
    }

这个函数定义在文件external/chromium_org/content/renderer/compositor_bindings/web_compositor_support_impl.cc中。

从这里可以看到,WebCompositorSupportImpl类的成员函数createContentLayer创建了一个WebContentLayerImpl对象返回给调用者。

WebContentLayerImpl对象的创建过程,即WebContentLayerImpl类的构造函数的实现,如下所示:

WebContentLayerImpl::WebContentLayerImpl(blink::WebContentLayerClient* client)
        : client_(client), ...... {
      if (WebLayerImpl::UsingPictureLayer())
        layer_ = make_scoped_ptr(new WebLayerImpl(PictureLayer::Create(this)));
      else
        layer_ = make_scoped_ptr(new WebLayerImpl(ContentLayer::Create(this)));
      ......
    }

这个函数定义在文件external/chromium_org/content/renderer/compositor_bindings/web_content_layer_impl.cc中。

从前面的调用过程可以知道,参数client指向的实际上是一个OpaqueRectTrackingContentLayerDelegate对象,WebContentLayerImpl类的构造函数首先将它保存在成员变量client_中 。

WebContentLayerImpl类的构造函数接下来调用WebLayerImpl类的静态成员函数UsingPictureLayer判断Render进程是否启用Impl Side Painting特性。如果启用的话,就会调用PictureLayer类的静态成员函数Create创建一个Picture Layer;否则的话,就会调用ContentLayer类的静态成员函数Create创建一个Content Layer。有了Picture Layer或者Content Layer之后,再创建一个WebLayerImpl对象,保存在WebContentLayerImpl类的成员变量layer_中。

当Render进程设置了enable-impl-side-painting启动选项时,就会启用Impl Side Painting特性,也就是会在Render进程中创建一个Compositor线程,与Render进程中的Main线程一起协作完成网页的渲染。在这种情况下,Graphics Layer在绘制网页内容的时候,实际上只是记录了绘制命令。这些绘制命令就记录在对应的Picture Layer中。

另一方面,如果Render进程没有设置enable-impl-side-painting启动选项,那么Graphics Layer在绘制网页内容的时候,就会通过Content Layer提供的一个Canvas真正地把网页内容对应的UI绘制在一个内存缓冲区中。

无论是Picture Layer还是Content Layer,它们都是在cc::Layer类继承下来的,也就是说,它们对应于图2所示的CC Layer。不过,我们只考虑Picture Layer的情况,因此接下来我们继续分析Picture Layer的创建过程,也就是PictureLayer类的静态成员函数Create的实现,如下所示:

scoped_refptr<PictureLayer> PictureLayer::Create(ContentLayerClient* client) {
      return make_scoped_refptr(new PictureLayer(client));
    }

这个函数定义在文件external/chromium_org/cc/layers/picture_layer.cc中。

从这里可以看到,PictureLayer类的静态成员函数Create创建了一个PictureLayer对象返回给调用者。

PictureLayer对象的创建过程,也就是PictureLayer类的构造函数的实现,如下所示:

PictureLayer::PictureLayer(ContentLayerClient* client)
        : client_(client),
          pile_(make_scoped_refptr(new PicturePile())),
          ...... {
    }

这个函数定义在文件external/chromium_org/cc/layers/picture_layer.cc中。

从前面的调用过程可以知道,参数client指向的实际上是一个WebContentLayerImpl对象,PictureLayer类的构造函数将它保存在成员变量client_中。

PictureLayer类的构造函数还做了另外一件重要的事情,就是创建了一个PicturePile对象,并且保存在成员变量pile_中。这个PicturePile对象是用来将Graphics Layer的绘制命令记录在Pictrue Layer中的,后面我们分析网页内容的绘制过程时就会看到这一点。

回到WebContentLayerImpl类的构造函数中,它创建了一个Pictrue Layer之后,接下来就会以这个Pictrue Layer为参数,创建一个WebLayerImpl对象,如下所示:

WebLayerImpl::WebLayerImpl(scoped_refptr<Layer> layer) : layer_(layer) {
      ......
    }

这个函数定义在文件external/chromium_org/content/renderer/compositor_bindings/web_layer_impl.cc中。

WebLayerImpl类的构造函数主要就是将参数layer描述的一个PictrueLayer对象保存在成员变量layer_中。

从前面Chromium网页Graphics Layer Tree创建过程分析一文还可以知道,Graphics Layer与Graphics Layer是通过GraphicsLayer类的成员函数addChild形成父子关系的(从而形成Graphics Layer Tree),如下所示:

void GraphicsLayer::addChild(GraphicsLayer* childLayer)
    {
        addChildInternal(childLayer);
        updateChildList();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/platform/graphics/GraphicsLayer.cpp中。

GraphicsLayer类的成员函数addChild首先调用成员函数addChildInternal将参数childLayer描述的一个Graphics Layer作为当前正在处理的Graphics Layer的子Graphics Layer,如下所示:

void GraphicsLayer::addChildInternal(GraphicsLayer* childLayer)
    {
        ......

        childLayer->setParent(this);
        m_children.append(childLayer);

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/platform/graphics/GraphicsLayer.cpp中。

这一步执行完成后,Graphics Layer之间就建立了父子关系。回到GraphicsLayer类的成员函数addChild中,它接下来还会调用另外一个成员函数updateChildList,用来在CC Layer之间建立父子关系,从而形CC Layer Tree。

GraphicsLayer类的成员函数updateChildList的实现如下所示:

void GraphicsLayer::updateChildList()
    {
        WebLayer* childHost = m_layer->layer();
        ......

        for (size_t i = 0; i < m_children.size(); ++i)
            childHost->addChild(m_children[i]->platformLayer());

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/platform/graphics/GraphicsLayer.cpp中。

从前面的分析可以知道,GraphicsLayer类的成员变量m_layer指向的是一个WebContentLayerImpl对象,调用这个WebContentLayerImpl对象的成员函数layer获得的是一个WebLayerImpl对象,如下所示:

blink::WebLayer* WebContentLayerImpl::layer() {
      return layer_.get();
    }

这个函数定义在文件external/chromium_org/content/renderer/compositor_bindings/web_content_layer_impl.cc中。

从前面的分析可以知道,WebContentLayerImpl类的成员变量layer_指向的是一个WebLayerImpl对象,因此WebContentLayerImpl类的成员函数layer返回的是一个WebLayerImpl对象。

回到GraphicsLayer类的成员函数updateChildList中,它接下来调用GraphicsLayer类的成员函数platformLayer获得当前正在处理的Graphics Layer的所有子Graphics Layer对应的WebLayerImpl对象,如下所示:

WebLayer* GraphicsLayer::platformLayer() const
    {
        return m_layer->layer();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/platform/graphics/GraphicsLayer.cpp中。

这些子Graphics Layer对应的WebLayerImpl对象也就是通过调用它们的成员变量m_layer指向的WebContentLayerImpl对象的成员函数layer获得的。

再回到GraphicsLayer类的成员函数updateChildList中,获得当前正在处理的Graphics Layer对应的WebLayerImpl对象,以及其所有的子Graphics Layer对应的WebLayerImpl对象之后,就可以通过调用WebLayerImpl类的成员函数addChild在它们之间也建立父子关系,如下所示:

void WebLayerImpl::addChild(WebLayer* child) {
      layer_->AddChild(static_cast<WebLayerImpl*>(child)->layer());
    }

这个函数定义在文件external/chromium_org/content/renderer/compositor_bindings/web_layer_impl.cc中。

从前面的分析可以知道,WebLayerImpl类的成员变量layer_指向的是一个PictrueLayer对象,因此WebLayerImpl类的成员函数addChild所做的事情就是在两个PictrueLayer对象之间建立父子关系,这是通过调用PictrueLayer类的成员函数AddChild实现的。

PictrueLayer类的成员函数AddChild是父类Layer继承下来的,它的实现如下所示:

void Layer::AddChild(scoped_refptr<Layer> child) {
      InsertChild(child, children_.size());
    }

这个函数定义在文件external/chromium_org/cc/layers/layer.cc中。

Layer类的成员函数AddChild将参数child描述的Pictrue Layer设置为当前正在处理的Picture Layer的子Picture Layer,这是通过调用Layer类的成员函数InsertChild实现的,如下所示:

void Layer::InsertChild(scoped_refptr<Layer> child, size_t index) {
      DCHECK(IsPropertyChangeAllowed());
      child->RemoveFromParent();
      child->SetParent(this);
      child->stacking_order_changed_ = true;

      index = std::min(index, children_.size());
      children_.insert(children_.begin() + index, child);
      SetNeedsFullTreeSync();
    }

这个函数定义在文件external/chromium_org/cc/layers/layer.cc中。

Layer类的成员函数InsertChild所做的第一件事情是将当前正在处理的Picture Layer设置为参数child描述的Pictrue Layer的父Picture Layer,并且将参数child描述的Pictrue Layer保存在当前正在处理的Picture Layer的子Picture Layer列表中。

Layer类的成员函数InsertChild所做的第二件事情是调用另外一个成员函数SetNeedsFullTreeSync发出一个通知,要在CC Layer Tree与CC Pending Layer Tree之间做一个Tree结构同步。

Layer类的成员函数SetNeedsFullTreeSync的实现如下所示:

void Layer::SetNeedsFullTreeSync() {
      if (!layer_tree_host_)
        return;

      layer_tree_host_->SetNeedsFullTreeSync();
    }

这个函数定义在文件external/chromium_org/cc/layers/layer.cc中。

Layer类的成员变量layer_tree_host_指向的是一个LayerTreeHost对象,这个LayerTreeHost是用来管理CC Layer Tree的,后面我们再分析它的创建过程。Layer类的成员函数SetNeedsFullTreeSync所做的事情就是调用这个LayerTreeHost对象的成员函数SetNeedsFullTreeSync通知它CC Layer Tree结构发生了变化,需要将这个变化同步到CC Pending Layer Tree中去。

LayerTreeHost类的成员函数SetNeedsFullTreeSync的实现如下所示:

void LayerTreeHost::SetNeedsFullTreeSync() {
      needs_full_tree_sync_ = true;
      SetNeedsCommit();
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

LayerTreeHost类的成员函数SetNeedsFullTreeSync将成员变量needs_full_tree_sync_设置为true,以标记要在CC Layer Tree和CC Pending Layer Tree之间做一次结构同步,然后再调用另外一个成员函数SetNeedsCommit请求在前面Chromium网页渲染机制简要介绍和学习计划一文中提到的调度器将CC Layer Tree同步到CC Pending Tree去。至于这个同步操作什么时候会执行,就是由调度器根据其内部的状态机决定了。这一点我们在后面的文章再分析。

这一步执行完成之后,就可以在CC模块中得到一个Layer Tree,这个Layer Tree与WebKit中的Graphics Layer Tree在结构上是完全同步的,并且这个同步过程是由WebKit控制的。这个同步过程之所以要由WebKit控制,是因为CC Layer Tree是根据Graphics Layer Tree创建的,而Graphics Layer Tree又是由WebKit管理的。

WebKit现在还需要做的另外一件重要的事情是告诉CC模块,哪一个Picture Layer是CC Layer Tree的根节点,这样CC模块才可以对整个CC Layer Tree进行管理。很显然,Graphics Layer Tree的根节点对应的Picture Layer,就是CC Layer Tree的根节点。因此,WebKit会在创建Graphics Layer Tree的根节点的时候,将该根节点对应的Picture Layer设置到CC模块中去,以便后者将其作为CC Layer Tree的根节点。

Graphics Layer Tree的根节点是什么时候创建的呢?从前面Chromium网页加载过程简要介绍和学习计划这个系列的文章可以知道,Graphics Layer Tree的根节点对应于Render Layer Tree的根节点,Render Layer Tree的根节点又对应于Render Object Tree的根节点,因此我们就从Render Object Tree的根节点的创建过程开始,分析Graphics Layer Tree的根节点的创建过程。

从前面Chromium网页DOM Tree创建过程分析一文可以知道,Render Object Tree的根节点是在Document类的成员函数attach中创建的,如下所示:

void Document::attach(const AttachContext& context)
    {
        ......

        m_renderView = new RenderView(this);
        ......

        m_renderView->setStyle(StyleResolver::styleForDocument(*this));

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/Document.cpp中。

Document类的成员函数attach首先创建了一个RenderView对象,保存在成员变量m_renderView中。这个RenderView对象就是Render Object Tree的根节点。Document类的成员函数attach接下来还会调用RenderView类的成员函数setStyle给前面创建的RenderView对象设置CSS属性。

从前面Chromium网页Render Layer Tree创建过程分析一文可以知道,在给Render Object Tree的节点设置CSS属性的过程中,会创建相应的Render Layer。这一步发生在RenderLayerModelObject类的成员函数styleDidChange中,如下所示:

void RenderLayerModelObject::styleDidChange(StyleDifference diff, const RenderStyle* oldStyle)  
    {  
        ......  

        LayerType type = layerTypeRequired();  
        if (type != NoLayer) {  
            if (!layer() && layerCreationAllowedForSubtree()) {  
                ......  

                createLayer(type);  

                ......  
            }  
        } else if (layer() && layer()->parent()) {  
            ......  

            layer()->removeOnlyThisLayer(); // calls destroyLayer() which clears m_layer  

            ......  
        }  

        if (layer()) {  
            ......  

            layer()->styleChanged(diff, oldStyle);  
        }  

        ......  
    }  

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/RenderLayerModelObject.cpp中。

RenderLayerModelObject类的成员函数styleDidChange的详细分析可以参考Chromium网页Render Layer Tree创建过程分析一文。其中,Render Layer的创建是通过调用RenderLayerModelObject类的成员函数createLayer实现的,并且创建出来的Render Layer的成员函数styleChanged会被调用,用来设置它的CSS属性。

在设置Render Layer Tree的根节点的CSS属性的过程中,会触发Graphics Layer Tree的根节点的创建,因此接下来我们继续分析RenderLayer类的成员函数styleChanged的实现,如下所示:

void RenderLayer::styleChanged(StyleDifference diff, const RenderStyle* oldStyle)
    {
        ......

        m_stackingNode->updateStackingNodesAfterStyleChange(oldStyle);

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/RenderLayer.cpp中。

RenderLayer类的成员变量m_stackingNode指向的是一个RenderLayerStackingNode对象。这个RenderLayerStackingNode对象描述的是一个Stacking Context。关于Stacking Context,可以参考前面Chromium网页Graphics Layer Tree创建过程分析一文。RenderLayer类的成员函数styleChanged调用上述RenderLayerStackingNode对象的成员函数updateStackingNodesAfterStyleChange通知它所关联的Render Layer的CSS属性发生了变化,这样它可能就需要更新自己的子元素。

RenderLayerStackingNode类的成员函数updateStackingNodesAfterStyleChange的实现如下所示:

void RenderLayerStackingNode::updateStackingNodesAfterStyleChange(const RenderStyle* oldStyle)
    {
        bool wasStackingContext = oldStyle ? !oldStyle->hasAutoZIndex() : false;
        int oldZIndex = oldStyle ? oldStyle->zIndex() : 0;

        bool isStackingContext = this->isStackingContext();
        if (isStackingContext == wasStackingContext && oldZIndex == zIndex())
            return;

        dirtyStackingContextZOrderLists();

        if (isStackingContext)
            dirtyZOrderLists();
        else
            clearZOrderLists();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/RenderLayerStackingNode.cpp中。

RenderLayerStackingNode类的成员函数updateStackingNodesAfterStyleChange判断当前正在处理的RenderLayerStackingNode对象关联的Render Layer的CSS属性变化,是否导致它从一个Stacking Context变为一个非Stacking Context,或者从一个非Stacking Context变为一个Stacking Context。

在从非Stacking Context变为Stacking Context的情况下,RenderLayerStackingNode类的成员函数updateStackingNodesAfterStyleChange就会调用另外一个成员函数dirtyZOrderLists将Stacking Context标记为Dirty状态,这样以后在需要的时候就会根据该Stacking Context的子元素的z-index重新构建Graphics Layer Tree。

RenderLayerStackingNode类的成员函数dirtyZOrderLists的实现如下所示:

void RenderLayerStackingNode::dirtyZOrderLists()
    {
        ......

        if (m_posZOrderList)
            m_posZOrderList->clear();
        if (m_negZOrderList)
            m_negZOrderList->clear();
        m_zOrderListsDirty = true;

        if (!renderer()->documentBeingDestroyed())
            compositor()->setNeedsCompositingUpdate(CompositingUpdateRebuildTree);
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/RenderLayerStackingNode.cpp中。

RenderLayerStackingNode类的成员函数dirtyZOrderLists首先是将用来保存子元素的两个列表清空。其中一个列表用来保存z-index为正数的子元素,另一个列表用来保存z-index为负数的子元素。这些子元素在各自的列表中均是按照从小到大的顺序排列的。有了这个顺序之后,Graphics Layer Tree就可以方便地按照z-index顺序创建出来。

RenderLayerStackingNode类的成员函数dirtyZOrderLists接下来将成员变量m_zOrderListsDirty的值设置为true,就将自己的状态标记为Dirty,以后就会重新根据子元素的z-index值,将它们分别保存在对应的列表中。

RenderLayerStackingNode类的成员函数dirtyZOrderLists最后判断当前加载的网页有没有被销毁。如果没有被销毁,就会调用另外一个成员函数compositor,获得一个RenderLayerCompositor对象。这个RenderLayerCompositor对象是用来管理当前加载的网页的Graphics Layer Tree的。有了这个RenderLayerCompositor对象之后,就可以调用它的成员函数setNeedsCompositingUpdate,用来通知它需要重建Graphics Layer Tree。

RenderLayerCompositor类的成员函数setNeedsCompositingUpdate的实现如下所示:

void RenderLayerCompositor::setNeedsCompositingUpdate(CompositingUpdateType updateType)
    {
        ......
        if (!m_renderView.needsLayout())
            enableCompositingModeIfNeeded();

        m_pendingUpdateType = std::max(m_pendingUpdateType, updateType);
        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/compositing/RenderLayerCompositor.cpp中。

RenderLayerCompositor类的成员变量m_renderView描述的是一个RenderView对象。这个RenderView对象就是在前面分析的Document类的成员函数attach中创建的RenderView对象。RenderLayerCompositor类的成员函数setNeedsCompositingUpdate判断它是否需要重新Layout。如果需要的话,就会调用另外一个成员函数enableCompositingModeIfNeeded将网页的Render Layer Tree的根节点设置为一个Compositing Layer,也就是要为它创建一个Graphics Layer。

在我们这个情景中,RenderLayerCompositor类的成员变量m_renderView描述的RenderView对象是刚刚创建的,这意味它需要执行一个Layout操作,因此接下来RenderLayerCompositor类的成员函数setNeedsCompositingUpdate会调用成员函数enableCompositingModeIfNeeded为Render Layer Tree的根节点创建一个Graphics Layer,作为Graphics Layer Tree的根节点。

RenderLayerCompositor类的成员函数enableCompositingModeIfNeeded的实现如下所示:

void RenderLayerCompositor::enableCompositingModeIfNeeded()
    {
        ......

        if (rootShouldAlwaysComposite()) {
            ......
            setCompositingModeEnabled(true);
        }
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/compositing/RenderLayerCompositor.cpp中。

RenderLayerCompositor类的成员函数enableCompositingModeIfNeeded首先调用成员函数rootShouldAlwaysComposite判断是否要为网页Render Layer Tree的根节点创建一个Graphics Layer。如果需要的话,就调用另外一个成员函数setCompositingModeEnabled进行创建。

RenderLayerCompositor类的成员函数rootShouldAlwaysComposite的实现如下所示:

bool RenderLayerCompositor::rootShouldAlwaysComposite() const
    {
        if (!m_hasAcceleratedCompositing)
            return false;
        return m_renderView.frame()->isMainFrame() || m_compositingReasonFinder.requiresCompositingForScrollableFrame();
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/compositing/RenderLayerCompositor.cpp中。

只有在采用硬件加速渲染网页的情况下,才需要创建Graphics Layer。当RenderLayerCompositor类的成员变量m_hasAcceleratedCompositing的值等于true的时候,就表示描述网页采用硬件加速渲染。因此,当RenderLayerCompositor类的成员变量m_hasAcceleratedCompositing的值等于false的时候,RenderLayerCompositor类的成员函数就返回一个false值给调用者,表示不需要为网页Render Layer Tree的根节点创建Graphics Layer。

在采用硬件加速渲染网页的情况下,在两种情况下,需要为Render Layer Tree的根节点创建Graphics Layer。第一种情况是当前网页加载在Main Frame中。第二种情况是当前网页不是加载在Main Frame,例如是通过iframe嵌入在Main Frame中,但是它是可滚动的。

我们假设当前网页是加载在Main Frame中的,因此RenderLayerCompositor类的成员函数rootShouldAlwaysComposite的返回值为true,这时候RenderLayerCompositor类的成员函数enableCompositingModeIfNeeded就会调用另外一个成员函数setCompositingModeEnabled为网页Render Layer Tree的根节点创建Graphics Layer。

RenderLayerCompositor类的成员函数setCompositingModeEnabled的实现如下所示:

void RenderLayerCompositor::setCompositingModeEnabled(bool enable)
    {
        ......

        m_compositing = enable;

        ......

        if (m_compositing)
            ensureRootLayer();
        else
            destroyRootLayer();

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/compositing/RenderLayerCompositor.cpp中。

从前面的调用过程可以知道,参数enable的值等于true,这时候RenderLayerCompositor类的成员函数setCompositingModeEnabled会调用另外一个成员函数ensureRootLayer创建Graphics Layer Tree的根节点。

RenderLayerCompositor类的成员函数ensureRootLayer的实现如下所示:

void RenderLayerCompositor::ensureRootLayer()  
    {  
        RootLayerAttachment expectedAttachment = m_renderView.frame()->isMainFrame() ? RootLayerAttachedViaChromeClient : RootLayerAttachedViaEnclosingFrame;
        ......  

        if (!m_rootContentLayer) {  
            m_rootContentLayer = GraphicsLayer::create(graphicsLayerFactory(), this);  
            ......  
        }  

        if (!m_overflowControlsHostLayer) {  
            ......  

            // Create a layer to host the clipping layer and the overflow controls layers.  
            m_overflowControlsHostLayer = GraphicsLayer::create(graphicsLayerFactory(), this);  

            // Create a clipping layer if this is an iframe or settings require to clip.  
            m_containerLayer = GraphicsLayer::create(graphicsLayerFactory(), this);  
            ......  

            m_scrollLayer = GraphicsLayer::create(graphicsLayerFactory(), this);  
            ......  
            // Hook them up  
            m_overflowControlsHostLayer->addChild(m_containerLayer.get());  
            m_containerLayer->addChild(m_scrollLayer.get());  
            m_scrollLayer->addChild(m_rootContentLayer.get());  

            ......  
        }  

        ......  

        attachRootLayer(expectedAttachment);
    }  

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/compositing/RenderLayerCompositor.cpp中。

RenderLayerCompositor类的成员函数ensureRootLayer的详细分析可以参考前面Chromium网页Graphics Layer Tree创建过程分析一文,现在我们关注的重点是它最后调用另外一个成员函数attachRootLayer将Graphics Layer Tree的根节点设置给WebKit的使用者,即Chromium的Content层。

RenderLayerCompositor类的成员函数attachRootLayer的实现如下所示:

void RenderLayerCompositor::attachRootLayer(RootLayerAttachment attachment)
    {
        ......

        switch (attachment) {
            ......
            case RootLayerAttachedViaChromeClient: {
                LocalFrame& frame = m_renderView.frameView()->frame();
                Page* page = frame.page();
                if (!page)
                    return;
                page->chrome().client().attachRootGraphicsLayer(rootGraphicsLayer());
                break;
            }
            ......
        }

        m_rootLayerAttachment = attachment;
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/rendering/compositing/RenderLayerCompositor.cpp中。

从前面的调用过程可以知道,如果当前网页是在Main Frame中加载的,那么参数attachment的值就等于RootLayerAttachedViaChromeClient,这时候RenderLayerCompositor类的成员函数attachRootLayer与当前加载网页关联的一个ChromeClientImpl对象,并且调用这个ChromeClientImpl对象的成员函数attachRootGraphicsLayer将Graphics Layer Tree的根节点传递给它处理。Graphics Layer Tree的根节点可以通过调用RenderLayerCompositor类的成员函数rootGraphicsLayer获得。

ChromeClientImpl类的成员函数attachRootGraphicsLayer的实现如下所示:

void ChromeClientImpl::attachRootGraphicsLayer(GraphicsLayer* rootLayer)
    {
        m_webView->setRootGraphicsLayer(rootLayer);
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/web/ChromeClientImpl.cpp中。

ChromeClientImpl类的成员变量m_webView指向的是一个WebViewImpl对象。这个WebViewImpl对象的创建过程可以参考前面Chromium网页Frame Tree创建过程分析一文。ChromeClientImpl类的成员函数attachRootGraphicsLayer所做的事情就是调用这个WebViewImpl对象的成员函数setRootGraphicsLayer,以便将Graphics Layer Tree的根节点传递给它处理。

WebViewImpl类的成员函数setRootGraphicsLayer的实现如下所示:

void WebViewImpl::setRootGraphicsLayer(GraphicsLayer* layer)
    {
        if (pinchVirtualViewportEnabled()) {
            PinchViewport& pinchViewport = page()->frameHost().pinchViewport();
            pinchViewport.attachToLayerTree(layer, graphicsLayerFactory());
            if (layer) {
                m_rootGraphicsLayer = pinchViewport.rootGraphicsLayer();
                m_rootLayer = pinchViewport.rootGraphicsLayer()->platformLayer();
                ......
            } 
            ......
        } else {
            m_rootGraphicsLayer = layer;
            m_rootLayer = layer ? layer->platformLayer() : 0;
            ......
        }

        setIsAcceleratedCompositingActive(layer);

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/web/WebViewImpl.cpp中。

如果浏览器设置了"enable-pinch-virtual-viewport"启动选项,调用WebViewImpl类的成员函数pinchVirtualViewportEnabled得到的返回值就会为true。这时候网页有两个Viewport,一个称为Inner Viewport,另一个称为Outer Viewport。Outer Viewport有两个特性。第一个特性是它的大小不跟随页面进行缩放,第二个特性是fixed positioned元素的位置是根据它来计算的。这种体验的特点是fixed positioned元素的位置不会随页面的缩放发生变化。为实现这种体验,需要在Graphics Layer Tree中增加一些Graphics Layer。这些Graphics Layer通过一个PinchViewport管理。这时候Graphics Layer Tree的根节点就不再是参数layer描述的Graphics Layer,而是PinchViewport额外创建的一个Graphics Layer。关于Pinch Virtual Viewport特性的更多信息,可以参考官方文档:Layer-based Solution for Pinch Zoom / Fixed Position

为简单起见,我们假设没有设置"enable-pinch-virtual-viewport"启动选项,这时候WebViewImpl类的成员函数setRootGraphicsLayer会将参数layer指向的一个Graphics Layer,也就是Graphics Layer Tree的根节点,保存在成员变量m_rootGraphicsLayer中,并且调用它的成员函数platformLayer获得与它关联的一个WebLayerImpl对象,保存在另外一个成员变量m_rootLayer中。

再接下来,WebViewImpl类的成员函数setRootGraphicsLayer调用另外一个成员函数setIsAcceleratedCompositingActive激活网页的硬件加速渲染,它的实现如下所示:

void WebViewImpl::setIsAcceleratedCompositingActive(bool active)
    {
        ......

        if (!active) {
            m_isAcceleratedCompositingActive = false;
            ......
        } else if (m_layerTreeView) {
            m_isAcceleratedCompositingActive = true;
            ......
        } else {
            ......

            m_client->initializeLayerTreeView();
            m_layerTreeView = m_client->layerTreeView();
            if (m_layerTreeView) {
                m_layerTreeView->setRootLayer(*m_rootLayer);
                ......
            }

            ......

            m_isAcceleratedCompositingActive = true;

            ......
        }

        ......
    }

这个函数定义在文件external/chromium_org/third_party/WebKit/Source/web/WebViewImpl.cpp中。

从前面的调用过程可以知道,参数active的值是等于true的,WebViewImpl类的成员变量m_isAcceleratedCompositingActive的值将被设置为参数active的值,用来表示网页是否已经激活网页硬件加速渲染。

WebViewImpl类还有两个重要的成员变量m_client和m_layerTreeView。其中,成员变量m_client的初始化过程可以参考前面Chromium网页Frame Tree创建过程分析一文,它指向的是一个在Chromium的Content层创建的RenderViewImpl对象。

另外一个成员变量m_layerTreeView是一个类型为WebLayerTreeView指针,它的值开始的时候是等于NULL的。WebViewImpl类的成员函数setIsAcceleratedCompositingActive被调用的时候,如果参数active的值是等于true,并且成员变量m_layerTreeView的值也等于NULL,那么WebKit就会先请求使用者,也就是Chromium的Content层,初始化CC Layer Tree。这是通过调用成员变量m_client指向的一个RenderViewImpl对象的成员函数initializeLayerTreeView实现的。Layer Tree View初始化完成之后,WebViewImpl类再将成员变量m_rootLayer描述的WebLayerImpl对象关联的Picture Layer设置为CC Layer Tree的根节点。

接下来我们先分析RenderViewImpl类的成员函数initializeLayerTreeView初始化CC Layer Tree的过程,然后再分析设置CC Layer Tree根节点的过程。

RenderViewImpl类的成员函数initializeLayerTreeView的实现如下所示:

void RenderViewImpl::initializeLayerTreeView() {
      RenderWidget::initializeLayerTreeView();
      ......
    }

这个函数定义在文件external/chromium_org/content/renderer/render_view_impl.cc中。

RenderViewImpl类的成员函数initializeLayerTreeView主要是调用父类RenderWidget的成员函数initializeLayerTreeView初始化一个CC Layer Tree,如下所示:

void RenderWidget::initializeLayerTreeView() {
      compositor_ = RenderWidgetCompositor::Create(
          this, is_threaded_compositing_enabled_);
      ......
      if (init_complete_)
        StartCompositor();
    }

这个函数定义在文件external/chromium_org/content/renderer/render_widget.cc中。

RenderWidget类的成员函数initializeLayerTreeView首先是调用RenderWidgetCompositor类的静态成员函数Create创建一个RenderWidgetCompositor对象,并且保存在成员变量compositor_中。在创建这个RenderWidgetCompositor对象期间,也会伴随着创建一个CC Layer Tree。

RenderWidget类有一个成员变量initcomplete,当它的值等于true的时候,表示Browser进程已经为当前正在加载的网页初始化好Render View,这时候RenderWidget类的成员函数initializeLayerTreeView就会调用另外一个成员函数StartCompositor激活前面Chromium网页加载过程简要介绍和学习计划一文中提到的调度器,表示它可以开始进行调度工作了。

接下来我们先分析RenderWidget类的成员变量init_complete_被设置为true的过程。从前面Chromium网页Frame Tree创建过程分析一文可以知道,当Browser进程为在Render进程中加载的网页创建了一个Render View之后,会向Render进程发送一个类型为ViewMsg_New的消息。这个IPC消息被RenderThreadImpl类的成员函数OnCreateNewView处理。在处理期间,会创建一个RenderViewImpl对象,并且调用它的成员函数Initialize对其进行初始化,如下所示:

void RenderViewImpl::Initialize(RenderViewImplParams* params) {  
      ......  

      main_render_frame_.reset(RenderFrameImpl::Create(  
          this, params->main_frame_routing_id));  
      ......  

      WebLocalFrame* web_frame = WebLocalFrame::create(main_render_frame_.get());  
      main_render_frame_->SetWebFrame(web_frame);  
      ......  

      webwidget_ = WebView::create(this);  
      ......  

      // If this is a popup, we must wait for the CreatingNew_ACK message before
      // completing initialization.  Otherwise, we can finish it now.
      if (opener_id_ == MSG_ROUTING_NONE) {
        ......
        CompleteInit();
      }

      webview()->setMainFrame(main_render_frame_->GetWebFrame());  

      ......  
    }

这个函数定义在文件external/chromium_org/content/renderer/render_view_impl.cc中。

RenderViewImpl类的成员函数Initialize的详细分析可以参考前面Chromium网页Frame Tree创建过程分析一文。这里我们看到,当RenderViewImpl类的成员变量opener_id_的值等于MSG_ROUTING_NONE的时候,另外一个成员函数CompleteInit就会被调用。RenderViewImpl类的成员变量opener_id_什么时候会等于MSG_ROUTING_NONE呢?如果正在加载的网页不是在一个Popup Window显示时,它的值就会等于MSG_ROUTING_NONE,否则它的值等于将它Popup出来的网页的Routing ID。从代码注释我们还可以看到,如果当前加载的网页是在一个Popup Window显示时,RenderViewImpl类的成员函数CompleteInit将会延迟到Render进程接收到Broswer发送另外一个类型为ViewMsg_CreatingNew_ACK的IPC消息时才会被调用。

我们假设正在加载的网页不是一个Popup Window显示,这时候RenderViewImpl类的成员函数CompleteInit就会被调用。RenderViewImpl类的成员函数CompleteInit是从父类RenderWidget继承下来的,它的实现如下所示:

void RenderWidget::CompleteInit() {
      ......

      init_complete_ = true;

      if (compositor_)
        StartCompositor();

      ......
    }

这个函数定义在文件external/chromium_org/content/renderer/render_widget.cc中。

从这里就可以看到,RenderWidget类的成员变量init_complete_将会被设置为true,并且在成员变量compositor_的值不等于NULL的情况下,会调用前面提到的成员函数StartCompositor激活前面Chromium网页加载过程简要介绍和学习计划一文中提到的调度器。

回到前面分析的RenderWidget类的成员函数initializeLayerTreeView中,我们假设正在加载的网页不是在一个Popup Window显示,因此当RenderWidget类的成员函数initializeLayerTreeView被调用时,Browser进程已经为正在加载的网页初始化好了Render View,这意味着此时RenderWidget类的成员变量init_complete_已经被设置为true,于是RenderWidget类的成员函数initializeLayerTreeView就会先调用RenderWidgetCompositor类的静态成员函数Create创建一个RenderWidgetCompositor对象,然后再调用另外一个成员函数StartCompositor激活前面Chromium网页加载过程简要介绍和学习计划一文中提到的调度器。接下来我们就先分析RenderWidgetCompositor类的静态成员函数Create的实现,在接下来一篇文章中再分析RenderWidget类的成员函数StartCompositor激活调度器的过程。

RenderWidgetCompositor类的静态成员函数Create的实现如下所示:

scoped_ptr<RenderWidgetCompositor> RenderWidgetCompositor::Create(
        RenderWidget* widget,
        bool threaded) {
      scoped_ptr<RenderWidgetCompositor> compositor(
          new RenderWidgetCompositor(widget, threaded));

      CommandLine* cmd = CommandLine::ForCurrentProcess();

      cc::LayerTreeSettings settings;
      ......

      settings.initial_debug_state.show_debug_borders =
          cmd->HasSwitch(cc::switches::kShowCompositedLayerBorders);
      settings.initial_debug_state.show_fps_counter =
          cmd->HasSwitch(cc::switches::kShowFPSCounter);
      settings.initial_debug_state.show_layer_animation_bounds_rects =
          cmd->HasSwitch(cc::switches::kShowLayerAnimationBounds);
      settings.initial_debug_state.show_paint_rects =
          cmd->HasSwitch(switches::kShowPaintRects);
      settings.initial_debug_state.show_property_changed_rects =
          cmd->HasSwitch(cc::switches::kShowPropertyChangedRects);
      settings.initial_debug_state.show_surface_damage_rects =
          cmd->HasSwitch(cc::switches::kShowSurfaceDamageRects);
      settings.initial_debug_state.show_screen_space_rects =
          cmd->HasSwitch(cc::switches::kShowScreenSpaceRects);
      settings.initial_debug_state.show_replica_screen_space_rects =
          cmd->HasSwitch(cc::switches::kShowReplicaScreenSpaceRects);
      settings.initial_debug_state.show_occluding_rects =
          cmd->HasSwitch(cc::switches::kShowOccludingRects);
      settings.initial_debug_state.show_non_occluding_rects =
          cmd->HasSwitch(cc::switches::kShowNonOccludingRects);
      ......

      compositor->Initialize(settings);

      return compositor.Pass();
    }

这个函数定义在文件external/chromium_org/content/renderer/gpu/render_widget_compositor.cc中。

RenderWidgetCompositor类的静态成员函数Create首先创建一个RenderWidgetCompositor对象,接着根据Render进程的启动选项初始化一个LayerTreeSettings对象,最后以这个LayerTreeSettings对象为参数,对前面创建的RenderWidgetCompositor对象进行初始化,这是通过调用RenderWidgetCompositor类的成员函数Initialize实现的。

接下来我们先分析RenderWidgetCompositor对象的创建过程,也就是RenderWidgetCompositor类的构造函数的实现,接下来再分析RenderWidgetCompositor对象的初始化过程,也就是RenderWidgetCompositor类的成员函数Initialize的实现。

RenderWidgetCompositor类的构造函数的实现如下所示:

RenderWidgetCompositor::RenderWidgetCompositor(RenderWidget* widget,
                                                   bool threaded)
        : threaded_(threaded),
          ......,
          widget_(widget) {
    }

这个函数定义在文件external/chromium_org/content/renderer/gpu/render_widget_compositor.cc中。

RenderWidgetCompositor类的构造函数主要是将参数widget指向的RenderViewImpl对象保存在成员变量widget_中,并且将参数threaded的值保存在成员变量threaded_中。参数threaded用来描述Render进程是否要采用线程化渲染,也就是是否需要创建一个Compositor线程来专门执行渲染相关的工作。

从前面的调用过程可以知道,参数threaded是从RenderWidget类的成员函数initializeLayerTreeView中传递过来的,它的值等于RenderWidget类的成员变量is_threaded_compositing_enabled_的值。RenderWidget类的成员变量is_threaded_compositing_enabled_是在构造函数初始化的,如下所示:

RenderWidget::RenderWidget(blink::WebPopupType popup_type,
                               const blink::WebScreenInfo& screen_info,
                               bool swapped_out,
                               bool hidden,
                               bool never_visible)
        : ...... {
      ......
      is_threaded_compositing_enabled_ =
          CommandLine::ForCurrentProcess()->HasSwitch(
              switches::kEnableThreadedCompositing);
    }

这个函数定义在文件external/chromium_org/content/renderer/render_widget.cc中。

这意味着当Render进程设置了"enable-threaded-compositing"启动选项时,Render进程就会采用线程化渲染机制。我们接下来以及以后的文章只考虑线程化渲染机制这种情况。

回到RenderWidgetCompositor类的构造函数中,这意味着它的成员变量threaded_会被设置为true。

接下来我们继续分析RenderWidgetCompositor对象的初始化过程,也就是RenderWidgetCompositor类的成员函数Initialize的实现,如下所示:

void RenderWidgetCompositor::Initialize(cc::LayerTreeSettings settings) {
      scoped_refptr<base::MessageLoopProxy> compositor_message_loop_proxy;
      RenderThreadImpl* render_thread = RenderThreadImpl::current();
      ......
      // render_thread may be NULL in tests.
      if (render_thread) {
        compositor_message_loop_proxy =
            render_thread->compositor_message_loop_proxy();
        ......
      }
      if (compositor_message_loop_proxy.get()) {
        layer_tree_host_ = cc::LayerTreeHost::CreateThreaded(
            this, shared_bitmap_manager, settings, compositor_message_loop_proxy);
      } else {
        layer_tree_host_ = cc::LayerTreeHost::CreateSingleThreaded(
            this, this, shared_bitmap_manager, settings);
      }
      ......
    }

这个函数定义在文件external/chromium_org/content/renderer/gpu/render_widget_compositor.cc中。

RenderWidgetCompositor类的成员函数Initialize首先调用RenderThreadImpl类的静态成员函数current获得一个RenderThreadImpl对象。这个RenderThreadImpl对象描述的实际上是Render进程的Render线程,也就是Main线程。这个Main线程是在Render进程启动的时候创建的,是一定会存在的,具体可以参考Chromium的Render进程启动过程分析一文。

RenderWidgetCompositor类的成员函数Initialize接下来调用前面获得的RenderThreadImpl对象的成员函数compositor_message_loop_proxy获得Render进程的Compositor线程的消息循环代理对象。当这个消息循环代理对象存在时,就会调用cc::LayerTreeHost类的静态成员函数CreateThreaded创建一个支持线程化渲染的LayerTreeHost对象,并且保存在成员变量layer_tree_host_中。另一方面,如果Render进程中不存在Compositor线程,那么RenderWidgetCompositor类的成员函数Initialize就会调用cc::LayerTreeHost类的静态成员函数CreateSingleThreaded创建一个不支持线程化渲染的LayerTreeHost对象。在后一种情况下,所有的渲染操作都将在Render进程的Main线程中执行。

接下来我们首先分析Render进程的Compositor线程的创建过程。前面提到,当Browser进程为Render进程中加载的网页创建了一个Render View时,就会发送一个类型为ViewMsg_New的IPC消息给Render进程。Render进程通过RenderThreadImpl类的成员函数OnCreateNewView接收和处理该消息,如下所示:

void RenderThreadImpl::OnCreateNewView(const ViewMsg_New_Params& params) {  
      EnsureWebKitInitialized();  
      // When bringing in render_view, also bring in webkit's glue and jsbindings.  
      RenderViewImpl::Create(params.opener_route_id,  
                             params.window_was_created_with_opener,  
                             params.renderer_preferences,  
                             params.web_preferences,  
                             params.view_id,  
                             params.main_frame_routing_id,  
                             params.surface_id,  
                             params.session_storage_namespace_id,  
                             params.frame_name,  
                             false,  
                             params.swapped_out,  
                             params.proxy_routing_id,  
                             params.hidden,  
                             params.never_visible,  
                             params.next_page_id,  
                             params.screen_info,  
                             params.accessibility_mode);  
    }  

这个函数定义在文件external/chromium_org/content/renderer/render_thread_impl.cc中。

除了调用RenderViewImpl类的静态成员函数Create创建一个RenderViewImpl对象,RenderThreadImpl类的成员函数OnCreateNewView还会调用另外一个成员函数EnsureWebKitInitialized确保WebKit已经初始化好。

RenderThreadImpl类的成员函数EnsureWebKitInitialized的实现如下所示:

void RenderThreadImpl::EnsureWebKitInitialized() {
      if (webkit_platform_support_)
        return;

      webkit_platform_support_.reset(new RendererWebKitPlatformSupportImpl);
      blink::initialize(webkit_platform_support_.get());
      ......

      const CommandLine& command_line = *CommandLine::ForCurrentProcess();

      bool enable = command_line.HasSwitch(switches::kEnableThreadedCompositing);
      if (enable) {
        ......

        if (!compositor_message_loop_proxy_.get()) {
          compositor_thread_.reset(new base::Thread("Compositor"));
          compositor_thread_->Start();
          ......
          compositor_message_loop_proxy_ =
              compositor_thread_->message_loop_proxy();
          ......
        }

        ......
      }

      ......
    }

这个函数定义在文件external/chromium_org/content/renderer/render_thread_impl.cc中。

除了执行初始化WebKit的工作,RenderThreadImpl类的成员函数EnsureWebKitInitialized还做的另外一件重要事情是检查Render进程是否设置了"enable-threaded-compositing"启动选项。如果设置了,那么就会创建和启动一个Compositor线程,并且将这个Compositor线程的消息循环代理对象保存在成员变量compositor_message_loop_proxy_中。这样当RenderThreadImpl类的成员函数compositor_message_loop_proxy被调用时,Compositor线程的消息循环代理对象就会被返回给调用者,如下所示:

class CONTENT_EXPORT RenderThreadImpl : public RenderThread,
                                            public ChildThread,
                                            public GpuChannelHostFactory {
     public:
      ......

      scoped_refptr<base::MessageLoopProxy> compositor_message_loop_proxy() const {
        return compositor_message_loop_proxy_;
      }

      ......
    };

这个函数定义在文件external/chromium_org/content/renderer/render_thread_impl.h中。

有了这个消息循环代理对象之后,就可以向Compositor线程发送消息请求其执行相应的操作了。

回到RenderWidgetCompositor类的成员函数Initialize,它获得了Compositor线程的消息循环代理对象之后,接下来就调用cc::LayerTreeHost类的静态成员函数CreateThreaded创建一个支持线程化渲染的LayerTreeHost对象,如下所示:

scoped_ptr<LayerTreeHost> LayerTreeHost::CreateThreaded(
        LayerTreeHostClient* client,
        SharedBitmapManager* manager,
        const LayerTreeSettings& settings,
        scoped_refptr<base::SingleThreadTaskRunner> impl_task_runner) {
      DCHECK(impl_task_runner);
      scoped_ptr<LayerTreeHost> layer_tree_host(
          new LayerTreeHost(client, manager, settings));
      layer_tree_host->InitializeThreaded(impl_task_runner);
      return layer_tree_host.Pass();
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

LayerTreeHost类的静态成员函数CreateThreaded首先创建了一个LayerTreeHost对象,如下所示:

LayerTreeHost::LayerTreeHost(LayerTreeHostClient* client,
                                 SharedBitmapManager* manager,
                                 const LayerTreeSettings& settings)
        : ......,
          client_(client),
          ...... {
      ......
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

从前面的调用过程可以知道,参数client指向的是一个RenderWidgetCompositor对象,这个RenderWidgetCompositor对象将会被保存LayerTreeHost类的成员变量client_中。

回到LayerTreeHost类的静态成员函数CreateThreaded中,它创建了一个LayerTreeHost对象之后,接下来会调用它的成员函数InitializeThreaded对其进行初始化,如下所示:

void LayerTreeHost::InitializeThreaded(
        scoped_refptr<base::SingleThreadTaskRunner> impl_task_runner) {
      InitializeProxy(ThreadProxy::Create(this, impl_task_runner));
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

从前面的调用过程可以知道,参数impl_task_runner描述的是Compositor线程的消息循环,LayerTreeHost类的成员函数InitializeThreaded首先调用ThreadProxy类的静态成员函数Create创建一个ThreadProxy对象,接着用这个ThreadProxy对象初始化当前正在处理的LayerTreeHost对象,这是通过调用LayerTreeHost类的成员函数IntializeProxy实现的。

接下来我们先分析ThreadProxy类的静态成员函数Create创建ThreadProxy对象的过程,接着再分析LayerTreeHost类的成员函数IntializeProxy初始化LayerTreeHost对象的过程。

ThreadProxy类的静态成员函数Create的实现如下所示:

scoped_ptr<Proxy> ThreadProxy::Create(
        LayerTreeHost* layer_tree_host,
        scoped_refptr<base::SingleThreadTaskRunner> impl_task_runner) {
      return make_scoped_ptr(new ThreadProxy(layer_tree_host, impl_task_runner))
          .PassAs<Proxy>();
    }

这个函数定义在文件external/chromium_org/cc/trees/thread_proxy.cc中。

从这里可以看到,ThreadProxy类的静态成员函数Create创建了一个ThreadProxy对象返回给调用者。

ThreadProxy对象的创建过程,即ThreadProxy类的构造函数的实现,如下所示:

ThreadProxy::ThreadProxy(
        LayerTreeHost* layer_tree_host,
        scoped_refptr<base::SingleThreadTaskRunner> impl_task_runner)
        : Proxy(impl_task_runner),
          ...... {
      ......
    }

这个函数定义在文件external/chromium_org/cc/trees/thread_proxy.cc中。

ThreadProxy类的构造函数主要是调用了父类Proxy的构造函数执行初始化工作,如下所示:

Proxy::Proxy(scoped_refptr<base::SingleThreadTaskRunner> impl_task_runner)
        : main_task_runner_(base::MessageLoopProxy::current()),
          ......
          impl_task_runner_(impl_task_runner),
          ...... {
      ......
    }

这个函数定义在文件external/chromium_org/cc/trees/proxy.cc中。

从前面的分析可以知道,参数impl_task_runner描述的是Compositor线程的消息循环,它将被保存在Proxy类的成员变量impl_task_runner_中。此外,Proxy类的构造函数还会通过调用MessageLoopProxy类的静态成员函数current获得当前线程的消息循环,并且保存在成员变量main_taskrunner。当前线程即为Render进程的Main线程,因此Proxy类的成员变量main_task_runner_描述的Main线程的消息循环。

初始化好Proxy类的成员变量main_task_runner_和impl_task_runner_之后,以后就可以通过调用Proxy类的成员函数MainThreadTaskRunner和ImplThreadTaskRunner获得它们描述的线程的消息循环,如下所示:

base::SingleThreadTaskRunner* Proxy::MainThreadTaskRunner() const {
      return main_task_runner_.get();
    }

    ......

    base::SingleThreadTaskRunner* Proxy::ImplThreadTaskRunner() const {
      return impl_task_runner_.get();
    }

这两个函数定义在文件external/chromium_org/cc/trees/proxy.cc中。

回到LayerTreeHost类的成员函数InitializeThreaded中,它创建了一个ThreadProxy对象之后,接下来就会调用另外一个成员函数InitializeProxy启动前面创建的ThreadProxy对象,如下所示:

void LayerTreeHost::InitializeProxy(scoped_ptr<Proxy> proxy) {
      ......

      proxy_ = proxy.Pass();
      proxy_->Start();
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

LayerTreeHost类的成员函数InitializeProxy首先将参数proxy描述的一个ThreadProxy对象保存在成员变量proxy_中,接着再调用上述ThreadProxy对象的成员函数Start对它进行启动,如下所示:

void ThreadProxy::Start() {
      ......

      CompletionEvent completion;
      Proxy::ImplThreadTaskRunner()->PostTask(
          FROM_HERE,
          base::Bind(&ThreadProxy::InitializeImplOnImplThread,
                     base::Unretained(this),
                     &completion));
      completion.Wait();

      main_thread_weak_ptr_ = main().weak_factory.GetWeakPtr();

      main().started = true;
    }

这个函数定义在文件external/chromium_org/cc/trees/thread_proxy.cc中。

ThreadProxy类的成员函数Start主要是向Compositor线程的消息队列发送了一个Task,并且等待这个Task完成。这个Task绑定了ThreadProxy类的成员函数InitializeImplOnImplThread,因此接下来ThreadProxy类的成员函数InitializeImplOnImplThread就会在Compositor线程中执行,如下所示:

void ThreadProxy::InitializeImplOnImplThread(CompletionEvent* completion) {
      ......
      impl().layer_tree_host_impl =
          layer_tree_host()->CreateLayerTreeHostImpl(this);

      SchedulerSettings scheduler_settings(layer_tree_host()->settings());
      impl().scheduler = Scheduler::Create(this,
                                           scheduler_settings,
                                           impl().layer_tree_host_id,
                                           ImplThreadTaskRunner());
      ......

      impl_thread_weak_ptr_ = impl().weak_factory.GetWeakPtr();
      completion->Signal();
    }

这个函数定义在文件external/chromium_org/cc/trees/thread_proxy.cc中。

ThreadProxy类的成员函数InitializeImplOnImplThread主要是做了三件事情。

第一件事情是调用前面创建的LayerTreeHost对象的成员函数CreateLayerTreeHostImpl函数创建了一个LayerTreeHostImpl对象,并且保存在内部的一个CompositorThreadOnly对象的成员变量layer_tree_host_impl中。前面创建的LayerTreeHost对象可以通过调用成员函数layer_tree_host获得。内部的CompositorThreadOnly对象可以通过调用成员函数impl获得。创建出来的LayerTreeHostImpl对象以后负责管理CC Pending Layer Tree和CC Active Layer Tree。

第二件事情是调用Scheduler类的静态成员函数Create创建了一个Scheduler对象。这个Scheduler对象以后就负责在Main线程与Compositor线程之间调度渲染工作。

第三件事情是将参数completion描述的Completion Event设置为有信号,这样正在等待的Main线程就可以唤醒继续执行其它工作了。

接下来我们继续分析LayerTreeHost类的成员函数CreateLayerTreeHostImpl创建LayerTreeHostImpl对象的过程,如下所示:

scoped_ptr<LayerTreeHostImpl> LayerTreeHost::CreateLayerTreeHostImpl(
        LayerTreeHostImplClient* client) {
      ......
      scoped_ptr<LayerTreeHostImpl> host_impl =
          LayerTreeHostImpl::Create(settings_,
                                    client,
                                    proxy_.get(),
                                    rendering_stats_instrumentation_.get(),
                                    shared_bitmap_manager_,
                                    id_);
      host_impl->SetUseGpuRasterization(UseGpuRasterization());
      ......
      return host_impl.Pass();
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

LayerTreeHost类的成员函数CreateLayerTreeHostImpl首先是调用LayerTreeHostImpl类的静态成员函数Create创建了一个LayerTreeHostImpl对象,接着再调用这个LayerTreeHostImpl对象的成员函数SetUseGpuRasterization设置它是否使用GPU光栅化。

LayerTreeHostImpl对象的创建过程,即LayerTreeHostImpl类的构造函数的实现,如下所示:

LayerTreeHostImpl::LayerTreeHostImpl(
        const LayerTreeSettings& settings,
        LayerTreeHostImplClient* client,
        Proxy* proxy,
        RenderingStatsInstrumentation* rendering_stats_instrumentation,
        SharedBitmapManager* manager,
        int id)
        : client_(client),
          proxy_(proxy),
          ...... {

      .......

      // LTHI always has an active tree.
      active_tree_ = LayerTreeImpl::create(this);

      ......
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host_impl.cc中。

从前面的调用过程可以知道,参数client和proxy指向的是同一个ThreadProxy对象,它们分别保存在LayerTreeHostImpl类的成员变量client_和proxy_中。LayerTreeHostImpl类的构造函数接下来还调用LayerTreeImpl类的静态成员函数create创建了一个Active Layer Tree。注意,这时候Pending Layer Tree还没有创建,等到要将Layer Tree内容同步到Pending Layer Tree的时候才会创建。

回到LayerTreeHost类的成员函数CreateLayerTreeHostImpl,它创建了一个LayerTreeHostImpl对象之后,接下来调用另外一个成员函数UseGpuRasterization获取Render进程是否要采用GPU光栅化的信息,如下所示:

bool LayerTreeHost::UseGpuRasterization() const {
      if (settings_.gpu_rasterization_forced) {
        return true;
      } else if (settings_.gpu_rasterization_enabled) {
        return has_gpu_rasterization_trigger_ &&
               content_is_suitable_for_gpu_rasterization_;
      } else {
        return false;
      }
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

当Render进程设置了"force-gpu-rasterization"和"enable-impl-side-painting"启动选项时,LayerTreeHost类的成员变量settings_指向的LayerTreeSettings对象的成员变量gpu_rasterization_forced的值就会等于true,这时候就会强制使用GPU光栅化。

当Render进程设置了"enable-gpu-rasterization"启动选项时,LayerTreeHost类的成员变量settings_指向的LayerTreeSettings对象的成员变量gpu_rasterization_enabled的值就会等于true,这时候是否使用GPU光栅化取决于LayerTreeHost类另外两个成员变量has_gpu_rasterization_trigger_和content_is_suitable_for_gpurasterization。当这两个成员变量的值均等于true的时候,就会使作GPU光栅化。

LayerTreeHost类的成员变量has_gpu_rasterization_trigger_的值由WebKit间接调用LayerTreeHost类的成员函数SetHasGpuRasterizationTrigger进行设置,这一点可以参考WebViewImpl类的成员函数updatePageDefinedViewportConstraints,主要是与网页的Viewport大小以及当前的缩放因子有关。LayerTreeHost类的成员变量content_is_suitable_for_gpu_rasterization_的值由Skia决定,后者根据当前要绘制的内容决定的,例如,如果要绘制的内容包含太多的凹多边形,并且这些凹多边形使用了反锯齿效果,那么就会禁用GPU光栅化。这一点可以参考SkPicturePlayback类的成员函数suitableForGpuRasterization。

在其它情况下,都是禁止使用GPU光栅化的。在目前的版本中,Render进程设置了"force-gpu-rasterization"和"enable-impl-side-painting"启动选项,因此会强制使用GPU光栅化。在以后的文章中,我们都是假设Chromium是使用GPU光栅化的。

再回到LayerTreeHost类的成员函数CreateLayerTreeHostImpl,它获得Render进程是否要采用GPU光栅化的信息之后,就会设置给前面创建的LayerTreeHostImpl对象,这是通过调用LayerTreeHostImpl类的成员函数SetUseGpuRasterization如下所示:

void LayerTreeHostImpl::SetUseGpuRasterization(bool use_gpu) {
      if (use_gpu == use_gpu_rasterization_)
        return;

      use_gpu_rasterization_ = use_gpu;
      ReleaseTreeResources();

      // Replace existing tile manager with another one that uses appropriate
      // rasterizer.
      if (tile_manager_) {
        DestroyTileManager();
        CreateAndSetTileManager();
      }

      // We have released tilings for both active and pending tree.
      // We would not have any content to draw until the pending tree is activated.
      // Prevent the active tree from drawing until activation.
      active_tree_->SetRequiresHighResToDraw();
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host_impl.cc中。

LayerTreeHostImpl类的成员函数SetUseGpuRasterization会将参数use_gpu的值保存在成员变量use_gpurasterization。如果这时候已经创建了分块管理器,即LayerTreeHostImpl类的成员变量tile_manager_的值不等于NULL,那么还会先销毁它,然后再重新创建。因为分块管理器在创建的时候就决定了光栅化的方式。最后,LayerTreeHostImpl类的成员函数SetUseGpuRasterization还会要求重新绘制高分辨率的Active Layer Tree。

这一步执行完成之后,CC Layer Tree就初始化完成了,回到前面分析的WebViewImpl类的成员函数setIsAcceleratedCompositingActive中,它接下来会调用成员变量m_client指向的RenderViewImpl对象的成员函数layerTreeView获得之前创建的一个RenderWidgetCompositor对象。

RenderViewImpl类的成员函数layerTreeView是从父类RenderWidget继承下来的,它的实现如下所示:

blink::WebLayerTreeView* RenderWidget::layerTreeView() {
      return compositor_.get();
    }

这个函数定义在文件external/chromium_org/content/renderer/render_widget.cc中。

从这里可以看到,RenderWidget类的成员函数layerTreeView返回的是成员变量compositor_描述的一个RenderWidgetCompositor对象。

再回到前面分析的WebViewImpl类的成员函数setIsAcceleratedCompositingActive,它获得了一个RenderWidgetCompositor对象,就会调用这个RenderWidgetCompositor对象的成员函数setRootLayer,以便将CC Layer Tree的根节点传递给它处理,如下所示:

void RenderWidgetCompositor::setRootLayer(const blink::WebLayer& layer) {
      layer_tree_host_->SetRootLayer(
          static_cast<const WebLayerImpl*>(&layer)->layer());
    }

这个函数定义在文件external/chromium_org/content/renderer/gpu/render_widget_compositor.cc中。

从前面的调用过程可以知道,参数layer描述的实际上是一个WebLayerImpl对象,调用它的成员函数layer可以获得与它关联的一个PictureLayer对象。这个PictureLayer对象将作为CC Layer Tree的根节点,设置给RenderWidgetCompositor类的成员变量layer_tree_host_描述的一个LayerTreeHost对象。这是通过调用LayerTreeHost类的成员函数SetRootLayer实现的,如下所示:

void LayerTreeHost::SetRootLayer(scoped_refptr<Layer> root_layer) {
      ......

      root_layer_ = root_layer;
      ......

      SetNeedsFullTreeSync();
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

从这里可以看到,LayerTreeHost类的成员函数SetRootLayer将CC Layer Tree的根节点保存在成员变量root_layer_中,以后通过这个成员变量就可以遍历整个CC Layer Tree。由于设置了新的CC Layer Tree,LayerTreeHost类的成员函数SetRootLayer还会调用另外一个成员函数SetNeedsFullTreeSync请求将CC Layer Tree同步到CC Pending Layer Tree去。

前面我们已经分析过LayerTreeHost类的成员函数SetNeedsFullTreeSync的实现了,它调用了另外一个成员函数SetNeedsCommit请求将CC Layer Tree同步到CC Pending Layer Tree去,也就执行一次ACTION_COMMIT操作,后者的实现如下所示:

void LayerTreeHost::SetNeedsCommit() {
      ......
      proxy_->SetNeedsCommit();
      ......
    }

这个函数定义在文件external/chromium_org/cc/trees/layer_tree_host.cc中。

LayerTreeHost类的成员函数SetNeedsCommit调用成员变量proxy_指向的一个ThreadProxy对象的成员函数SetNeedsCommit请求执行一次ACTION_COMMIT操作,如下所示:

void ThreadProxy::SetNeedsCommit() {
      ......

      if (main().commit_requested)
        return;
      ......
      main().commit_requested = true;

      SendCommitRequestToImplThreadIfNeeded();
    }

这个函数定义在文件external/chromium_org/cc/trees/thread_proxy.cc中。

ThreadProxy对象的成员函数SetNeedsCommit首先判断之前请求的ACTION_COMMIT操作是否已经被执行。如果还没有被执行,那么就会忽略当前请求,实际上是将多个ACTION_COMMIT请求合成一个执行。事实上,每当WebKit修改了Render Object Tree的内容时,都会请求CC模块执行一次ACTION_COMMIT操作。不过,如果这些ACTION_COMMIT操作请求得太过频繁,就会合成一个一起执行。

如果之前没有请求过ACTION_COMMIT操作,或者之前请求的ACTION_COMMIT操作已经被执行,那么ThreadProxy类的成员函数SetNeedsCommit就会调用另外一个成员函数SendCommitRequestToImplThreadIfNeeded请求Compositor线程执行一次ACTION_COMMIT请求,如下所示:

void ThreadProxy::SendCommitRequestToImplThreadIfNeeded() {
      DCHECK(IsMainThread());
      if (main().commit_request_sent_to_impl_thread)
        return; 

      main().commit_request_sent_to_impl_thread = true;
      Proxy::ImplThreadTaskRunner()->PostTask(
          FROM_HERE,
          base::Bind(&ThreadProxy::SetNeedsCommitOnImplThread,
                     impl_thread_weak_ptr_));
    }

这个函数定义在文件external/chromium_org/cc/trees/thread_proxy.cc中。

ThreadProxy类的成员函数SendCommitRequestToImplThreadIfNeeded必须要确保在Main线程中执行。这也是Chromium的多线程编程哲学,在设计上规定了某些对象只能在特定的线程进行访问。

ThreadProxy类的成员函数SendCommitRequestToImplThreadIfNeeded首先判断Main线程之前是否已经向Compositor线程请求过执行ACTION_COMMIT操作,并且该请求已经被执行。如果是的话,那么就会忽略当前请求。否则的话,就会向Compositor线程的消息队列发送一个Task,这个Task绑定了ThreadProxy类的成员函数SetNeedsCommitOnImplThread。

这意味着接下来ThreadProxy类的成员函数SetNeedsCommitOnImplThread接下来会在Compositor线程中执行,如下所示:

void ThreadProxy::SetNeedsCommitOnImplThread() {
      ......
      DCHECK(IsImplThread());
      impl().scheduler->SetNeedsCommit();
    }

这个函数定义在文件external/chromium_org/cc/trees/thread_proxy.cc中。

Compositor线程并不是马上就执行请求的ACTION_COMMIT操作,它只是调用了内部的调度器的成员函数SetNeedsCommit,即Scheduler类的成员函数SetNeedsCommit,如下所示:

void Scheduler::SetNeedsCommit() {
      state_machine_.SetNeedsCommit();
      ProcessScheduledActions();
    }

这个函数定义在文件external/chromium_org/cc/scheduler/scheduler.cc中。

Scheduler类的成员函数SetNeedsCommit首先通过调用成员变量state_machine_描述的一个SchedulerStateMachine对象的成员函数SetNeedsCommit将内部的状态机设置为需要COMMIT,如下所示:

void SchedulerStateMachine::SetNeedsCommit() { needs_commit_ = true; }

这个函数定义在文件external/chromium_org/cc/scheduler/scheduler_state_machine.cc中。

SchedulerStateMachine类的成员函数SetNeedsCommit只是将成员变量needs_commit_的值设置为true,表示需要执行一次ACTION_COMMIT操作。不过,这个ACTION_COMMIT有可能不能马上执行,因为有可能CC模块还没有为网页创建Output Surface,或者CC模块现在需要对网页上一帧执行光栅化操作等等。调度器当前到底需要执行什么样的操作,由Scheduler类的成员函数SetNeedsCommit调用另外一个成员函数ProcessScheduledActions决定。

至此,我们就分析完成Chromium为网页创建CC Layer Tree的过程了。有了网页的CC Layer Tree之后,Chromium还要为网页创建渲染上下文,也就是Output Surface,这样才可以将网页的内容渲染出来。网页Output Surface的创建以及网页其它渲染相关的操作,都是通过一个调度器根据一定的策略触发执行的。因此在接下来的一篇文章中,我们就继续分析Chromium网页渲染调度器的执行过程,敬请关注!更多的信息也可以关注老罗的新浪微博:http://weibo.com/shengyangluo

Copyright© 2013-2019

京ICP备2023019179号-2