• WebKit渲染基础之RenderLayer树

    与Render树的区别
    服务器君一共花费 8.525 ms 进行了 2 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    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代码后所创建。

    基于上面的描述,相信大家已经对Render树和RenderLayer树有了一定的了解。现在让我们回忆一下前面小节的第一幅图。该图其实是给出了示例的HTML网页在WebKit中三种树的对应关系(仅选取其中重要的部分),相信现在你已经了解它们的含义了。

    源代码目录

    WebKit/Source/WebCore/rendering
             WebKit为支持渲染所涉及的各个类
    WebKit/Source/WebCore/dom/
             DOM树的相关文件,包括一些基础类及其接口定义
    WebKit/Source/WebCore/html/
             为HTML网页的元素所定义的相关的基础类,它们基于DOM的Node类
    

    参考文献:Google design documents: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [移动开发] 使用support-v7 ActionBar前的那些坑 3 个条目
  2. [Python程序设计] Python语言概述 6 个条目
  3. [移动开发] Android 网络通信框架Volley 1 个条目
  4. [智力开发与知识管理] 整体性学习策略 9 个条目
  5. [移动开发] Android属性系统Property 9 个条目
  6. [搜索引擎优化] 与百度权重有关的信息 2 个条目
  7. [搜索引擎优化] 百度搜索引擎优化指南 3 个条目
  8. [Python程序设计] Tornado背景知识介绍 4 个条目
  9. [软件工程与项目管理] 呈现树的构建 13 个条目
  10. [Python程序设计] Django架构流程分析 7 个条目
  11. [JavaScript程序设计] 关于HTTP Keep-Alive 6 个条目
  12. [移动开发] Android Studio里的Gradle 3 个条目
窗口 -- [博客]