chromium渲染页面流程（三棵树）

总结：DOM树-->渲染树-->layer树(render layer和 graphic layer)-->cc合成树

1.节点和DOM树
  网页的内容在内部存储为称为DOM树的Node 对象树。
页面上的每个HTML元素以及元素之间出现的文本都与节点相关联。DOM树的顶级节点始终是文档节点。

2.从节点到RenderObjects（渲染树）
  DOM树中生成可视输出的每个节点都有一个相应的RenderObject。RenderObjects存储在并行树结构中，称为渲染树。RenderObject知道如何在显示表面上绘制节点的内容。它通过向GraphicsContext 发出必要的绘制调用来实现。GraphicsContext负责将像素写入最终显示在屏幕上的位图。在Chrome中，GraphicsContext包含了我们的2D绘图库Skia。

  传统上，大多数GraphicsContext调用都是对SkCanvas或SkPlatformCanvas的调用，即立即绘制成软件位图。但是要将绘画移离主线程，现在这些命令会被记录到SkPicture中。SkPicture是一个可序列化的数据结构，可以捕获然后重放命令，类似于显示列表。 

3.从RenderObjects(渲染树)到RenderLayers（layer树）

每个RenderObject 直接或间接通过祖先RenderObject 与RenderLayer 相关联。

共享相同坐标空间的RenderObjects（例如受同一CSS变换影响）通常属于同一个RenderLayer。存在RenderLayers，以便以正确的顺序合成页面的元素以正确显示重叠内容，半透明元素等。有许多条件会触发为特定RenderObject创建新的RenderLayer，如RenderBoxModelObject :: requiresLayer（）并覆盖某些派生类。RenderObject的常见情况，保证创建RenderLayer：

RenderLayers也形成树层次结构。根节点是与页面中的根元素对应的RenderLayer，并且每个节点的后代是在父层中可视地包含的层。每个RenderLayer的子节点都保存在两个排序列表中，这两个列表按升序排序，negZOrderList 包含具有负z-indices的子层（因此层位于当前层之下），而posZOrderList 包含具有正z-indices的子层（超出当前图层的图层）。

4.从RenderLayers到GraphicsLayers

为了使用合成器，一些（但不是全部）RenderLayers得到它们自己的背衬表面（具有它们自己的背衬表面的层被广泛地称为合成层）。每个RenderLayer都有自己的GraphicsLayer（如果它是合成层）或使用其第一个祖先的GraphicsLayer。这类似于RenderObject与RenderLayers的关系。 GraphicsLayers在内存和其他资源方面成本很高（例如，某些关键操作的CPU时间复杂度与GraphicsLayer树的大小成比例）。可以为RenderLayers创建许多其他图层，这些图层与RenderLayer重叠并具有自己的背景表面，这可能很昂贵。

每个GraphicsLayer都有一个GraphicsContext，用于绘制相关的RenderLayers。合成器最终负责将GraphicsContexts的位图输出组合成后续合成传递中的最终屏幕图像。

5.从GraphicsLayers到WebLayers再到CC Layers(chromium 合成层)

在我们开始使用Chrome的合成器实现之前，只需要几层抽象！GraphicsLayers可以通过一个或多个Web *图层表示其内容。这些是WebKit端口需要实现的接口; 请参阅Blink的公共/平台目录，了解WebContentsLayer.h或WebScrollbarLayer.h等接口。Chrome的实现在src / webkit / renderer / compositor_bindings中，它们使用Chrome合成器层类型实现抽象的Web * Layer接口。

6.总之，概念上有四个并行树结构，它们用于渲染的目的略有不同：

a.DOM树，这是我们的根本保留模型 
b.渲染对象树(RenderObject)，其中有一个1：1映射到DOM树的可视节点。RenderObjects知道如何绘制相应的DOM节点。 
c.RenderLayer树，由RenderLayers的映射到在渲染对象树渲染对象。映射是多对一的，因为每个RenderObject都与其自己的RenderLayer或其第一个祖先的RenderLayer相关联。RenderLayer树在层之间保留z排序。 
d.该GraphicsLayer树，测绘GraphicsLayers一个一对多RenderLayers。

每个GraphicsLayer都在Chrome中使用Chrome合成器层实现Web *图层。这些最终的“cc层”（cc = Chrome合成器）是合成器知道如何操作的。

当有人说“层”时它们可能指的是任何以上结构！