Chromium网页Render Layer Tree创建过程分析.doc

Chromium网页Render Layer Tree创建过程分析 在前面一文中，我们分析了网页Render Object Tree的创建过程。在创建Render Object Tree的同时，WebKit还会创建Render Layer Tree，但不是每一个Render Object都有对应的Render Layer。Render Layer是一个最小渲染单元，被若干Render Object共用。本文接下来就分析Render Layer Tree的创建过程。 网页的Render Object Tree与Render Layer Tree的关系可以通过图1描述，如下所示： 图1 Render Layer Tree与DOM Tree、Render Object Tree和Graphics Layer Tree的关系 从图1还可以看到，Render Layer Tree创建完成之后，WebKit还会继续创建一个Graphics Layer Tree。本文主要关注Render Layer Tree的创建过程。DOM Tree和Render Object Tree的创建过程可以参考和这两篇文章。Graphics Layer Tree的创建过程在接下来一篇文章分析。 网页的Render Layer Tree是在创建Render Object Tree的过程中创建的。确切地说，是在设置Render Object的CSS属性的过程中创建的。从前面一文可以知道，当DOM Tree中的HTMLElement节点需要进行渲染的时候，WebKit就会为其创建一个Render Object。这个Render Object在创建完成之后，就会被设置CSS属性，如下所示： [cpp] view plain copy 在CODE上查看代码片派生到我的代码片 void RenderTreeBuilder::createRendererForElementIfNeeded() { ...... Element* element = toElement(m_node); RenderStyle style = this-style(); if (!element-rendererIsNeeded(style)) return; RenderObject* newRenderer = element-createRenderer(style); ...... RenderObject* parentRenderer = this-parentRenderer(); ...... element-setRenderer(newRenderer); newRenderer-setStyle(style); // setStyle() can depend on renderer() already being set. parentRenderer-addChild(newRenderer, nextRenderer); } 这个函数定义在文件external/chromium_org/third_party/WebKit/Source/core/dom/RenderTreeBuilder.cpp中。 从这里可以看到，新创建的Render Object的CSS属性是通过调用RenderObject类的成员函数setStyle设置的，它的实现如下所示： [cpp] view plain copy 在CODE上查看代码片派生到我的代码片 void RenderObject::setStyle(PassRefPtrRenderStyle style) { ...... if (m_style == style) { ...... return; } StyleDifference diff; unsigned contextSensitiveProperties = ContextSensitivePropertyNone; if (m_style) diff = m_style-visualInvalidationDiff(*style, contextSensitiveProperti