《webkit内核源代码分析（五）》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、WebKit内核源代码分析(五)红心地瓜（tomorrow.cyz@gmail.com）摘要：本文分析WebKit中html的解析过程，DOM节点树的建立。关键词：WebKit，html解析,htmltreeconstruction,WebCore,DOM节点树，dlmu20011.HTML解析模型图1HTML解析模型图上图是HTML解析模型图，HTML解析分成Tokeniser和TreeConstruction两个步骤，在”WebKit中的html词法分析”(http://blog.csdn.ne

2、t/dlmu2001/archive/2010/11/09/5998130.aspx)一文中，我们已经对Tokeniser这一步进行了分析，本文的目标是TreeConstruction这一步。TreeConstruction输入是token流，输出是DOM节点树。2.DOM树HTMLDOM定义了一套标准来将html文档结构化，它定义了表示和修改文档所需的对象、这些对象的行为和属性以及对象之间的关系，可以把它理解为页面上数据和结构的一个树形表示。Node是DOM模型中的基础类，它可以分成13类（见No

3、deType），在HTML解析中，最常见的是Document，Element，Text三类。lDocument是文档树的根节点，在HTML文档中，他派生为HTMLDocument。l在文档中，所有的标签转化为Element类，一般它有标签名，并根据标签名继承为特定的子类。lElement之间的原始文本转化成Text类。以一个简单的html页面为例：

hl1

hl2

hl3

4、h3>经过解析后的节点树如下（忽略换行符）：图2HTMLDOM节点树示例如果没有忽略换行符，则每个换行符就是一个Value为””的Text节点。3.TreeConstruction原理将图二中的节点树以WebKit中的类具体化（同样忽略换行符）。图3WebkitHTMLDOM节点树示例看到这里，你是不是觉得仿佛看到了一个呼之欲出的TreeConstruction轮廓？是的，最简化的情况就是这样，根据输入的token，创建出相应的Element派生类，然后添加到DOM树

5、中合适的位置，这就是TreeConstruction干的事情。当然，添加到合适的位置，这个需要一系列复杂的规则，另外，WebKit将Render树的创建也放到了TreeConstruction阶段中来，再加上CSS，Javascript，所以，这就是你看到的复杂的代码。放出两个函数原型，热热身，培养培养感情。TreeConstruction流程由一个状态“InsertionMode”进行控制，它影响token的处理以及是否支持CDATA部分，HTML5中给出了详细的规则（http://www.wha

6、twg.org/specs/web-apps/current-work/multipage/parsing.html#the-insertion-mode）。它也控制了在特定状态下能够处理的token，比如在head里面，再出现head标签，显然是不应该处理的。4.开放元素堆栈为了维护即将解析的标签同已解析的标签之间的关系（此时即将解析的标签还没有加入到DOM树中），引入了开放元素堆栈m_openElements,初始状态下，这个堆栈是空的，它是向下增长的，所以最上面的节点是最早加入到堆栈中的，在h

7、tml文档中，最上面的节点就是html元素，最底部的节点就是最新加入到堆栈中的。TreeBuilder的时候，每碰到一个StartTag的token，就会往m_opnElements中压栈，碰到EndTag的token，则出栈。像Character这样的token，则不需要进行压栈出栈的动作，只有可以包含子节点的tag，才做压栈出栈的动作。Html5的文档中对开放元素堆栈也有说明，http://www.whatwg.org/specs/web-apps/current-work/multipage/

8、parsing.html#the-stack-of-open-elements。对于正在解析的token，除了根节点html，它必然是堆栈底部元素（m_openElements.top()）的子节点，所以在形成DOM树的时候，就可以通过ContainerNode::parserAddChild这样的接口加入到DOM节点树中。除了正常的堆栈和压栈，对于html,head,body元素，栈结构(HTMLElementStack)中有专门的成员m_htmlElement,m