WebKit的结构与解构 [ 邓侃 ] 于:2009-05-24

WebKit的结构与解构

 

从指定一个HTML文本文件，到绘制出一幅布局复杂，字体多样，内含图片音频视频等等多媒体内容的网页，这是一个复杂的过程。在这个过程中Webkit所做的一切，都是围绕DOM Tree和Rendering Tree这两个核心。上一章我们谈到这两棵树各自的功用，这一章，我们借一个简单的HTML文件，展示一下DOM Tree和Rendering Tree的具体构成，同时解剖一下Webkit是如何构造这两棵树的。

 

1. DOM Tree 与 Rendering Tree 的结构

 

Figure 1中左上是一个简单的HTML文本文件，右上是Webkit rendering engine绘制出来的页面。页面的内容包括一个标题，“AI”，一行正文，“Ape's Intelligence”，以及一幅照片。整个页面分成前后两个层面，标题和正文绘制在前一个层面，照片处于后一个层面。L君和我亦步亦趋地跟踪了 Webkit，从解析这个HTML文本文件，到生成DOM Tree和Rendering Tree的各个步骤，目的是为了了解DOM Tree和Rendering Tree的具体构成，和构造过程。

 

先说Figure 1中左下角的DOM Tree。基本上HTML文本文件中每个tag，在webkit/webcore/html中都有一个class与之对应。譬如 tag 对应HTMLHtmlElement， tag 对应HTMLHeadElement，