理解WebKit和Chromium: HTML解析和DOM
转载请注明原文地址:http://blog.csdn.net/milado_nju
# HTML解析和DOM
## 概述
前面介绍了很多眼花缭乱的新技术,关于渲染,关于硬件加速,关于布局,关于其他很多,同大家一样,我也花了很多时间来消化它们。本章介绍稍微基础些的话题(本系列的写作顺序完全是随心所欲地),就是在渲染整个过程的初始阶段---HTML解析。不过这不表示它简单,其实这里是非常绕人的。在前面描述渲染过程,其实也是回避了这些方面的很多细节,原因也很简单,我自己也没有完全仔细地了解清楚. :-(
现在又重新阅读和debug一下代码,因此,借用本章节,想完整的描述一下从HTML及其资源(例如图片等)下载后到DOM树建立好这一段过程的细节及其WebKit所涉及的这一切的一切。大体地,本章内容主要包括网页结构描述,WebKit对网页结构的表示,WebKit解析HTML的基础设施,一般过程,DOM规范和DOM树。
按照惯例,这里给出一个例子。个人崇尚简单,只要能说明问题就行,如下所示,后面的解释和过程是基于此例子展开地。
## 网页结构
让我们首先了解网页的基本结构,这样便于后面理解WebKit的相关设施。其实,它并不复杂,如下图所示。
整个是一个网页,这里称之为Page。每个Page都有一个主框(Main Frame),该框通常包含一个HTML Document,主框也可能包含子框(sub frame),如图所示,这就是网页的多框结构,虽然这一结构饱受诟病,但现实还是这样。现在,更多的网页仅有主框,这样便于搜索引擎的检索和处理。本章的例子是一个仅有主框的最简单的网页结构。
这些框构成一个树型结构,以主框为根节点,每个框也可能包含自己的HTML Document,它是一颗DOM树。
## WebKit设施
介绍了网页的基本结构,那么WebKit的设施也相对容易理解,下图是WebKit相对应的类,和网页的结构是一一对应的。这其中WebView是网页对外的接口。
在介绍WebKit中其他类之前,有必要先介绍一个WebKit普遍使用的设计模式。首先看一个例子。下图是Chrome和ChromeClient,这两个类非常重要。此Chrome非彼Chrome,这里的Chrome是WebKit的一个类,不是Google的浏览器产品Chrome。类Chrome后面会介绍,这里强调的是因为WebKit有很多种移植(port),所以不同移植中的Chrome需要有不同的实现,所以Chrome类需要满足两类要求:
1) Chrome需要具备有获取各个平台资源的能力,例如WebKit可以调用Chrome来创建一个新窗口;
2) Chrome需要把WebKit的状态和进度等信息分发给外部的调用者或者说是WebKit的使用者;
WebKit内部跟这两类要求相关的需求都是通过Chrome的接口来完成,这时候有个问题,那就是如何让WebKit和外部调用者既不紧密耦合,而能方便支持不同的平台?WebKit使用ChromeClient抽象类来实现。每个port实现类ChromeClient,一方面监听WebKit状态,一方面返回WebKit所需要的资源和信息。WebKit直接调用Chrome的接口,Chrome调用ChromeClient的接口,而ChromeClient的实现由各个移植来完成。
在这一部分中,很多都是该模式的类组合,例如FrameLoader和FrameLoaderClient,ImageLoader和ImageLoaderClient,ContextMenu和ContextMenuClient等等。这些类比较容易理解,不再阐述,这里简单介绍几组类的关系(很多其他的组类似):
1. Frame和FrameLoader:Frame表示的是页面框和框的加载器,一个负责页面的表示,一个负责加载需要的接口及实现,还有很多类似的组合类,例如Document和DocumentLoader,CachedImage和ImageLoader等。
2. WebView和Page:二者一一对应,Page是WebKit内部表示网页的类,WebView是WebKit对外表示网页的类,Page只有一个实现,WebView在不同的移植中有不同的实现。其他类似的组合类如WebFrame和Frame。
最后接上面介绍的类Chrome,它是一个非常重要的类,是WebKit与它的使用者之间的桥梁,主要负责UI和渲染相关的需要用到平台相关接口。以下是它的一些主要功能:
1. 跟UI和渲染显示相关的需要移植实现的接口集合类;
2. 继承自HostWindow(宿主窗口),其包含一系列接口,用来通知重绘或者更新相应整个窗口,滚动窗口等等;
3. 窗口相关操作,例如显示,隐藏等;
4. 显示/隐藏窗口中的toolbar,statusbar,scroolbar等;
5. 显示JavaScript相关的窗口,例如javascript的Alert,confirm, prompt窗口等;
6. 其他一些跟显示相关的,例如colorchooser等。
## HTML解析的一般过程
首先介绍主要对象的创建顺序,如下图所示,简单明了。
下面是解析和创建DOM树的一般过程,依旧是用图说话,为简单起见,省略其中的若干类和步骤。
上述图中的顺序,简单来讲是,先接受服务器发送过来的数据,之后解析成一系列的Tokens,然后在加载结束后建立DOM树,这还是比较容易理解地,不再详细描述。下图是解析完例子后所创建的DOM树。简单吧?我也觉得:-)
## DOM标准
DOM定义的是一组平台无关和语言无关的接口,该接口允许编程语言动态访问和更改结构化文档。本人( :-) )见的比较多的应用对象是XML和HTML。W3C标准化组织定义一系列DOM接口,随着时间的发展,目前包括DOM level 1, 2, 3。每个新版本是对以前版本的补充和新功能的加入。下面是对这三个版本的简单介绍:
DOM level 1:
1. Core:一组底层的接口,其接口可以表示任何结构化的文档,同时也允许对其进行扩展,典型的例子是支持XML文档。
2. HTML:一组基于Core定义的接口的上层接口,主要是为了方便HTML文档的访问。
DOM level 2:
1. Core:对DOM level1 中core部分的扩展,其中著名的就是getElementById(没用过的请举手),还有很多跟名空间(namespace)相关的接口;
2. Views:书上说views是“允许动态访问和修改文档内容的表示,主要是两个接口AbstractView和DocumentView”,没接触过加不懂,谁来救救我?
3. Events:这个很重要,引入了对时间的处理,个人觉得是个重要的变化,主要有EventTarget, Mouse events等接口,但不支持Keyboard,这个在DOM level3才被加入;
4. Style(CSS):加入接口可以修改样式属性;
5. Traversal and range:这个容易理解,就是遍历树(NodeIterator和TreeWalker)加上对制定范围的文档修改删除等操作;
6. HTML: 扩充DOM level1的HTML部分,允许动态访问和修改HTML文档。
DOM level 3:
1. Core:加入了新的adoptNode() 和 textContent支持;
2. Load and save:动态加载和序列化DOM表示;
3. Validation:根据scheme验证文档的有效性;
4. Events:主要扩展对keyboard的支持。HTML5和触屏技术如火如荼,所以对Touch的支持很快就会进入规范;
5. XPath: 使用XPath1.0来访问DOM树,XPath是一种简单直观的检索DOM树节点的方式,具体见W3CXPath标准。
DOM标准对具体的表示方法没有任何限制,只是定义了接口,因此它在现实中有很多种实现。DOM的树状表示是其中比较普遍的方式,还可以是二进制表示,其有很多的优点(例如binary xml),详情请google之。
好了,该结束本章了,但这不是全部,这部分还有很多的细节值得研究和探讨,例如个人比较关注的是DOM树上的事件(Event)分发机制。有兴趣的话,可以自行阅读以下目录中的WebKit代码,相信你会获益非浅。
## 源文件目录
third_party/WebKit/Source/WebCore/loader
加载相关的类,例如负责加载Document,Frame,image等
third_party/WebKit/Source/WebCore/page
表示页面的类,例如page, frame等, 及页面相关的设施,例如contextmenu,JavaScript内置的对象,例如,window,console, navigator, dom等。
third_party/WebKit/Source/WebCore/dom
DOM相关的类,包括节点定义类
third_party/WebKit/Source/WebCore/html
html标注的相应的DOM节点类定义
third_party/WebKit/Source/WebCore/html/parser
HTML解析器相关类
## 参考文献
2. http://en.wikipedia.org/wiki/Document_Object_Model
3. http://www.w3.org/TR/DOM-Level-3-Events/
4. http://www.w3.org/TR/DOM-Level-3-Core/core.html
5. http://www.w3schools.com/htmldom/default.asp
6. https://developer.mozilla.org/en-US/docs/DOM_Levels
7. http://www.ibm.com/developerworks/cn/xml/x-keydom/
8. http://www.ibm.com/developerworks/cn/xml/x-keydom2/index.html
9. http://wenku.baidu.com/view/7fa3ad6e58fafab069dc02b8.html
By yongsheng@chromium.org