RenderObject
在DOM树中,某些节点是用户不可见的,也就是说这些只是起一些其他方面而不是显示内容的作用。例如表示HTML文件头的“meta”节点,在最终的显示结果中,用户是看不到它的存在的,笔者称之为“非可视化节点”。该类型其实还包含很多元素,例如示例代码7-1中的“head”、“script”等。而另外的节点就是用来展示网页内容的,例如示例代码7-1中的“body”、“div”、“span”、“canvas”、“img”等,这些节点可以显示一块区域,如文字、图片、2D图形等,被称为“可视节点”。
对于这些“可视节点”,因为WebKit需要将它们的内容绘制到最终的网页结果中,所以WebKit会为它们建立相应的RenderObject对象。一个RenderObject对象保存了为绘制DOM节点所需要的各种信息,例如样式布局信息,经过WebKit的处理之后,RenderObject对象知道如何绘制自己。
那么哪些情况下为一个DOM节点建立新的RenderObject对象呢?
•DOM树的document节点。
•DOM树中的可视节点,例如html、body、div等。而WebKit不会为非可视化节点创建RenderObject节点,例如上面提到的一些例子。
•某些情况下WebKit需要建立匿名的RenderObject节点,该节点不对应于DOM树中的任何节点,而是WebKit处理上的需要。
WebKit在创建DOM树被创建的同时也创建RenderObject对象
RenderObject树
RenderObject对象构成了一棵树
网页层次和RenderLayer树
WebKit会为网页的层次创建相应的RenderLayer对象。当某些类型RenderObject的节点或者具有某些CSS样式的RenderObject节点出现的时候,WebKit就会为这些节点创建RenderLayer对象
当某些类型RenderObject的节点或者具有某些CSS样式的RenderObject节点出现的时候,WebKit就会为这些节点创建RenderLayer对象。 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节点。
渲染方式
RenderObject对象知道如何绘制自己,但是,问题是RenderObject对象用什么来绘制内容呢?在WebKit中,绘图操作被定义了一个抽象层,这就是绘图上下文,所有绘图的操作都是在该上下文中来进行的。
绘图上下文可以分成两种类型,第一种是用来绘制2D图形的上下文,称之为2D绘图上下文(GraphicsContext);第二种是绘制3D图形的上下文,称之为3D绘图上下文(GraphicsContext3D)。这两种上下文都是抽象基类,也就是说它们只提供接口,因为WebKit需要支持不同的移植
2D绘图上下文的具体作用就是提供基本绘图单元的绘制接口以及设置绘图的样式。绘图接口包括画点、画线、画图片、画多边形、画文字等,绘图样式包括颜色、线宽、字号大小、渐变
关于3D绘图上下文的介绍,它的主要用处是支持CSS3D、WebGL等。
提到网页的渲染方式,目前主要有两种方式,第一种是软件渲染,第二种是硬件加速渲染。
每个RenderLayer对象可以被想象成图像中的一个层,各个层一同构成了一个图像。在渲染的过程中,如果绘图操作使用CPU来完成,那么称之为软件绘图。如果绘图操作由GPU来完成,称之为GPU硬件加速绘图。
理想情况下,每个层都有个绘制的存储区域,这个存储区域用来保存绘图的结果。最后,需要将这些层的内容合并到同一个图像之中,称之为合成(Compositing),使用了合成技术的渲染称之为合成化渲染
网页的三种渲染方式
第二种和第三种方式,都是使用了合成化的渲染技术,也就是使用GPU硬件来加速合成这些网页层,合成的工作都是由GPU来做,这里称为硬件加速合成(Accelerated Compositing)。但是,对于每个层,这两种方式有不同的选择。其中某些层,第二种方式使用CPU来绘图,另外一些层使用GPU来绘图。对于使用CPU来绘图的层,该层的结果首先当然保存在CPU内存中,之后被传输到GPU的内存中,这主要是为了后面的合成工作。第三种渲染方式使用GPU来绘制所有合成层。第二种方式和第三种方式其实都属于硬件加速渲染方式。前面的这些描述,是把RenderLayer对象和实际的存储空间对应,现实中不是这样的,这只是理想的情况。
特点
•软件渲染是目前很常见的技术,也是浏览器最早使用的渲染方式这一技术比较节省内存,特别是更宝贵的GPU内存。
•软件渲染只能处理2D方面的操作,软件渲染方式就比较合适来渲染该类型的网页。问题是,一旦遇上了HTML5的很多新技术,软件渲染显然无能为力,一是因为能力不足,典型的例子是CSS3D、WebGL等
•硬件渲染性能不好,软件渲染同硬件加速渲染另外一个很不同的地方就是对更新区域的处理。当网页中有一个更新小型区域的请求(如动画)时,软件渲染可能只需要计算一个极小的区域,而硬件渲染可能需要重新绘制其中的一层或者多层,然后再合成这些层。硬件渲染的代价可能会大得多。(在大多数情况下)
•硬件渲染对需要使用3D绘图的操作来说特别适合,会消耗更多的内存资源