WebKit渲染基础之RenderLayer树

RenderLayer树

RenderLayer树是基于Render树建立起来的一颗新的树。同样，RenderLayer节点和Render节点不是一一对应关系，而是一对多的关系。那么哪些情况下的RenderObject节点需要建立新的RenderLayer节点呢？

DOM树的document节点对应的RenderView节点

DOM树中的document 的子女节点，也就是HTML节点对应的RenderBlock节点

显式的CSS位置

有透明效果的对象

节点有溢出（overflow），alpha或者反射等效果的

Canvas 2D和3D (WebGL)

Video节点对应的RenderObject对象

一个RenderLayer被建立之后，其所在的RenderObject对象的所有后代均包含在该RenderLayer，除非这些后代需要建立自己的RenderLayer。而后代的RenderLayer的父亲就是自己最近的祖先所在的不同的RenderLayer，这样，它们也构成了一颗RenderLayer树。

每个RenderLayer对应的Render节点内容均会绘制在该RenderLayer所对应的层次上（或者内部存储结构上）。不同的RenderLayer可以共享同一个内部存储结构，也可以有各自的后端存储，这取决于不同的移植。在软件渲染下，通常各个RenderLayer的内容都绘制在同一块后端存储上。在GPU硬件加速的下，某些RenderLayer可能有自己独立的后端存储，而后通过合成器来把这些不同的后端合成在一起，最终形成网页的可视化内容。

RenderLayer在创建RenderObject对象的时候，如果需要，也会同时被创建，当然也有可能在执行JavaScript代码时，更新页面的样式从而需要新创建一个RenderLayer。

一个例子：



上面的代码结构很简单，就是一些HTML的基本元素组成的，例如HTML，HEAD，DIV，A, IMG， TABLE等等， 然后包含一个特别的HTML5元素CANVAS，而且还有一小段JavaScript代码。

简单解释一下这段代码的含义：这段代码是对CANVAS元素创建一个WebGL的Context，有了这个context，就可以在canvas元素上绘制3D的内容。这个类似于OpenGL或者OpenGLES的context，具体canvas和WebGL后面会介绍到。

这段HTML源代码被WebKit解析后会生成一颗DOM树。这段代码的DOM树主要结构如前面一小节 WebKit渲染基础之Render树的建立 第一幅图中的
DOM树 部分所示。当DOM树生成时，WebKit同时建立了一颗Render树，如上所说，代码的Render树被打印成如下图所示的文本信息。



首先，上图中的“layer at (x, x)”表示不同的RenderLayer节点，下面的所有RenderObject均属于该RenderLayer。以第一个layer为例，它对应于DOM中的Document节点。后面的(0, 0)表示该节点在坐标系中的位置，最后的1028x683表示该节点的大小。它包含的RenderView节点后面的信息也是同样的意思。

其次，看其中最大的部分——第二个layer，包含了HTML中的绝大部分元素。这里有三点需要解释一下：

第一，Head元素没有相应的RenderObject，如上面所解释的，因为它不是一个可视的元素。

第二，Canvas元素不在其中，而是在第三个layer中（RenderHTMLCanvas）。但是它仍然是RenderBody节点的子女。

第三，匿名的RenderBlock节点，它包含了RenderText， RenderInline等节点，原因如前所说。

再次，来看一下第三个layer。因为从Canvas创建了一个WebGL3D Context对象，这里需要重新生成一个新的layer。

最后，来说明一下三个layer的创建时间。第一和第二个layer在创建DOM树后，会触发创建；第三个layer测试资源加载解析好之后，执行后面的JavaScript代码后所创建。

源代码目录

1	WebKit/Source/WebCore/rendering

2	WebKit为支持渲染所涉及的各个类

3	WebKit/Source/WebCore/dom/

4	DOM树的相关文件，包括一些基础类及其接口定义

5	WebKit/Source/WebCore/html/

6	为HTML网页的元素所定义的相关的基础类，它们基于DOM的Node类

参考：http://www.nowamagic.net/academy/detail/48110560