浏览器-03 WebKit 渲染1

WebKit是一个渲染引擎,而不是一个浏览器;
DOM是对HTML或者XML等文档的一种结构化表示方法,通过这种方式,用户可以通过提供标准的接口来访问页面中的任何元素的相关属性,并可对DOM进行相应的添加、删除和更新操作等;
基于DOM树的一些可视的节点,WebKit来根据需要来创建相应的RenderObject节点,这些节点也构成了Render树;
基于Render树,WebKit也会根据需要来为它们中的某些节点创建新的RenderLayer节点, 从而形成RenderLayer树;
WebKit的布局计算和浏览器的渲染,GPU硬件加速都依赖Render树和RenderLayer树;

Render树

Render树节点和DOM树节点不是一一对应关系;下面情况下需要建立新的Render节点:
* DOM树的document节点;
* DOM树中的可视化节点,如HTML,BODY,DIV等;
* 某些情况下需要建立匿名的Render节点,该节点不对应于DOM树中的任何节点;
Render树建立后,布局运算会计算出相关的属性;其中有位置,大小,是否浮动等;渲染引擎利用这些信息绘制这些元素;

CSS中有块级元素和内嵌元素之分;RenderBlock用来表示块级元素,;
为了处理上的方便,某些情况下需要建立匿名的RenderBlock对象;因为RenderBlock的子女必须都是内嵌的元素或都是非内嵌的元素;所以,当它包􏰀两种元素的时,它会为相邻的内嵌元素创建一个块级RenderBlock节点, 然后设置该节点为自己的子女并且设置这些内嵌元素为它的子女;

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源代码被WebKit解析后会生成一颗DOM树;当DOM树生成时，WebKit同时建立了一颗Render树;
上图中的layer at (x, x)表示不同的RenderLayer节点,下面的所有RenderObject均属于该RenderLayer;
最大的部分-第二个layer,包􏰀了HTML中的绝大部分元素;
* Head元素没有相应的RenderObject;
* Canvas元素不在其中,而是在第三个layer中(RenderHTMLCanvas);但是它仍然是RenderBody节点的子节点;
* 匿名的RenderBlock节点, 包含􏰀了RenderText, RenderInline等节点;
第三个layer:因为从Canvas创建了一个WebGL3D Context对象,这里需要重新生成一个新的layer;
三个layer的创建时间:第一和第二个layer在创建DOM树后,会触发创建;第三个layer测试资源加载解析好之后,执行后面的JavaScript代码后所创建;

posted @ 2015-12-10 22:11 JinksPeng 阅读(316) 评论(0) 收藏举报

刷新页面返回顶部