WebKit会将布局计算的结果保存到RenderObject树中，RenderObject和其他树（RenderLayer树等），构成了WebKit渲染的主要基础设施。
7.1 RenderObject树
在DOM树构建完成之后，webkit所要做的事情就是为DOM树节点构建RenderObject树。在DOM树中，节点分为“非可视化节点”和“可视节点”，对于这些“可视节点”，因为webkit需要将它们的内容绘制到最终的网页结果中，所以webkit会为它们建立相应的RenderObject对象。
一个RenderObject对象保存了为绘制DOM节点所需要的各种信息，例如：样式布局信息，经过WebKit处理之后，RenderObject对象知道如何绘制自己。
这些RenderObject对象同DOM的节点对象类似，它们也构成一棵树，在这里我们成为RenderObject树。RenderObject树是基于DOM树建立起来的一棵新树，是为了布局计算和渲染的等机制而构建的一种新的内部表示。
RenderObject树和DOM树节点不是一一对应的关系。
7.2 RenderObject树
DOM树节点和RenderObject树的对应关系.png
7.3 网页层次和RenderLayer树
网页可分层的原因：
- 为了方便网页开发者开发网页并设置网页的层次；
- WebKit处理上的便利，也就是说为了简化渲染的逻辑。
RenderLayer树是基于RenderObject树建立起来的一棵新树，RenderLayer节点和RenderObject节点不是一一对应的关系，而是一对多的关系。在如下情况下RenderObject节点需要建立新的RenderLayer节点：
- DOM树的Document节点对应的RenderView节点。
- DOM树中的Document的子女节点，也就是HTML节点对应的RenderBlock节点。
- 显式的指定CSS位置的RenderObject节点。
- 有透明效果的RenderObject节点。
- 节点有溢出（Overflow）、alpha或者反射等效果的RenderObject节点。
- 使用Canvas 2D和3D（WebGL）技术的RenderObject节点。
- Video节点对应的RenderObject节点。
理想情况下，每一个RenderLayer对象都有一个后端类，该后端类用来存储该RenderLayer对象绘制的结果。实际情况中则比较复杂，在不同的渲染模式下，不同的WebKit的移植中，情况都不一样。RenderLayer节点的使用可以有效减少网页结构的复杂程度，并在很多情况下能够减少重新渲染的开销。
RenderObject树和RenderLayer树的对应关系如下图：
RenderObject树和RenderLayer树的关系.png
7.4 渲染方式
7.4.1 绘图上下文（GraphicsContext）
RenderObject对象知道如何绘制自己，但是RenderObject对象用什么来绘制内容呢？在WebKit中，绘图操作被定义了一个抽象层，这就是绘图上下文，所有的绘图的操作都是在该上下文中来进行的。
绘图上下文可以分成两种类型，第一种是用来绘制2D图形的上下文，称为2D绘图上下文（GraphicsContext）；第二种是绘制3D图形的上下文，称为3D绘图上下文（GraphicsContext3D）。
2D绘图上下文的具体作用就是提供基本绘图单元的绘制接口以及设置绘图的样式。绘图接口包括画点、画线、画图片、画多边形、画文字等，绘图样式包括颜色、线宽字号大小、渐变等。RenderObject对象知道自己需要画什么样的点，什么样的结果，所以RenderObject对象调用绘图上下文的这些基本操作就是绘制实际的显示结果。
3D绘图上下文主要是支持CSS3D、WebGL等。
7.4.2 渲染方式
在完成构建DOM树之后，WebKit所要的事情就是构建渲染的内部表示并使用图形库将这些模型绘制出来。网页的渲染方式主要分为两种：
- 软件渲染
- 硬件加速渲染
每个RenderLayer对象可以被想象成图像中的一个层，每个层一同构成了一个图像。在渲染的过程中，浏览器也可以作同样多的理解。每个层对应网页中的一个或者一些可视元素，这些元素都绘制内容到该层上，这里把这一过程称为绘图操作。
如果绘图操作使用CPU来完成，那么称之为软件绘图。如果绘图操作由GPU来完成，称之为GPU硬件加速绘图。理想情况下，每个层都有一个绘制的存储区域，这个存储区域用来保存绘图的结果。最后，需要将这些层的内容合并到同一个图像之中，这里称之为合成（Compositing），使用了合成技术的渲染称之为合成化渲染。
所以在RenderObject树和RenderLayer树之后，WebKit的机制操作将内部模型转换成可视化的结果，分为两个阶段：
- 每层的内容进行绘图工作；
- 将这些绘图的结果合成一个图像。
对于软件渲染机制，WebKit需要使用CPU来绘制每层的内容，而且软件渲染机制是没有合成阶段的，因为没有必要，在软件渲染中，通常渲染的结果就是一个位图（Bitmap），绘制每一层的时候都是用该位图，区别在于绘制的位置可能不一样。
网页的三种渲染方式.png
从上图可以看到，软件渲染中网页使用的一个位图，实际上就是一块CUP使用的内存空间。第二种和第三种方式都使用了合成化的渲染技术，也就是使用GPU硬件来加速合成这些网页层，合成的工作都是由GPU来做，这里称为硬件加速合成（Accelerated Compositing）。
但是，对于每个层，这两种方式有不同的选择。其中某些层，第二种方式使用CPU来绘图，另外一些层使用GPU来绘图。对于使用CPU来绘图的层，该层的结果首先当然保存在CPU内存中，之后被保存到GPU的内存中，这主要是为了后面的合成工作。 第三种渲染方式使用GPU来绘制所有合成层。前面这些描述，是把RenderLayer对象和实际的存储空间对应，现实中不是这样的，这只是理想的情况。
三种方式的优缺点和适用场景
首先，对于常见的2D绘图操作，使用GPU来绘图不一定比使用CPU绘图在性能上有优势，例如绘制文字、点、线等，原因是CPU使用缓存机制有效减少了重复绘制的开销而且不需要GPU并行性。其次，GPU的内存资源相对CPU的内存资源来说比较紧张，而且网页的分层使得GPU的内存使用相对比较多。鉴于此，就目前情况来看，三者都存在是有其合理性的。
- 软件渲染技术比较节省内存，特别是更宝贵的GPU内存，但是软件渲染只能处理2D方面的操作。简单的网页没有复杂绘图或者多媒体方面的需求，软件渲染方式就比较适合来渲染该类型的网页。缺点是一旦遇上了HTML5的很多新技术，软件渲染显得无能为力。所以软件渲染在移动领域使用的很少。
- 硬件加速的合成渲染方式，每个层的绘制和所有层的合成均使用GPU硬件来完成，这对需要使用3D绘图的操作来说特别合适。
- 软件绘图的合成化渲染方式结合了前面两种方式的优点，这是因为很多网页可能既包含基本的HTML元素，也包含一些HTML5新功能。
7.5 WebKit软件渲染技术
WebKit第一次绘制网页的时候，WebKit绘制的区域等同于可视区域大小。而在这之后，WebKit只是首先计算需要更新的区域，然后绘制同这些区域有交集的RenderObject节点。这也就是说，如果更新区域跟某个RenderLayer节点有交集，WebKit会继续查找RenderLayer树中包含的RenderObject字数中的特定一个或一些节点，而不是绘制整个RenderLayer对应的RenderObject子树。
WebKit绘制网页的更新区域.png
WebKit渲染结果的存储方式，在不同的平台上可能不一样，但是基本上都是CPU内存上的一块区域，多数情况下是一个位图（Bitmap）。
网友评论