WebKit渲染基础之Render树的建立

WebKit是一个渲染引擎，而不是一个浏览器，它专注于网页内容展示，其中渲染是其中核心的部分之一。这里着重于对渲染部分的基础进行一定程度的了解和认识，主要理解基于DOM树来介绍Render树和RenderLayer树的构建由来和方式。

那么什么是DOM？简单来说，DOM是对HTML或者XML等文档的一种结构化表示方法，通过这种方式，用户可以通过提供标准的接口来访问HTML页面中的任何元素的相关属性，并可对DOM进行相应的添加、删除和更新操作等。更多相关信息可查阅W3C的文档。

基于DOM树的一些可视（visual）的节点，WebKit来根据需要来创建相应的RenderObject节点，这些节点也构成了一颗树，称之为Render树。基于Render树，WebKit也会根据需要来为它们中的某些节点创建新的RenderLayer节点，从而形成一棵RenderLayer树。

Render树和RenderLayer树是WebKit支持渲染所提供的基础但是却非常重要的设施。这是因为WebKit的布局计算依赖它们，浏览器的渲染和GPU硬件加速也都依赖于它们。幸运地是，得益于它们接口定义的灵活性，不同的浏览器可以很方便地来实现自己的渲染和加速机制。

为了直观了解这三种树，下图给出了这三种树及其它们之间的对应关系，后面会详细介绍里面的细节。

Render树的建立

Render树是基于DOM树建立起来的一颗新的树， 是布局和渲染等机制的基础设施。 Render树节点和DOM树节点不是一一对应关系，那么哪些情况下需要建立新的Render节点呢？

• DOM树的document节点；

• DOM树中的可视化节点，例如HTML，BODY，DIV等，非可视化节点不会建立Render树节点，例如HEAD，META，SCRIPT等；

• 某些情况下需要建立匿名的Render节点，该节点不对应于DOM树中的任何节点；

RenderObject对象在DOM树创建的同时也会被创建，当然，如果DOM中有动态加入元素时，也可能会相应地创建RenderObject对象。下图示例的是RenderObject对象被创建的函数调用过程。 

Render树建立之后，布局运算会计算出相关的属性，这其中有位置，大小，是否浮动等。有了这些信息之后，渲染引擎才只知道在何处以及如何画这些元素。

RenderObject类及其子类

RenderObject是Render树的节点基础类，提供了一组公共的接口。它有很多的子类，这些子类可能对应一些DOM树中的节点，例如RenderText，有些则是容器类，例如RenderBlock。下图给出了一些常用的类的继承关系图，这其中RenderBlock是一个非常重要的类。

匿名RenderBlock对象

CSS中有块级元素和内嵌(inline)元素之分。内嵌元素表现的是行布局形式，就是说这些元素以行进行显示。以 div 元素为例，如果设置属性 style 为 display:inline 时，则那是内嵌元素，那么它可能与前面的元素在同一行；如果该元素没有设置这个属性时，则是块级元素，那么在新的行里显示。

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

转载本站文章《WebKit渲染基础之Render树的建立》,
请注明出处：https://www.zhoulujun.cn/html/webfront/browser/webkit/2015_1213_357.html