html解析的简单方式,Webkit之HTML解析

加载部分HTML文本(即主资源)后便可以开始解析HTML元素(对输入字节流进行逐字扫描，识别HTML元素)，最后生成DOM树，本文只讲HTML解析。

HTML解析部分时序图：

其中最为重要的过程是(1)startToken(2)nextToken(3)endToken(4)constructTreeFromHTMLToken，这里的4步是循环执行的，当输入字符结束时，则跳出循环。

HTMLTokenizer::nextToken则创建了token，然后可以根据token创建html元素，解析的整个过程就是一个状态机

HTML解析状态机：

初始状态为DataState，状态机结束后会返回一个HTMLToken对象，不同的结束方式(上图中有三个出口1、2、3)HTMLToken的类型也会不同。

classHTMLToken {enumType {

Uninitialized,

DOCTYPE,

StartTag,

EndTag,

Comment,

Character,

EndOfFile,

};

} ;

对于1结束位置：Type=EndOfFile

对于2结束位置：Type=Character

对于3结束位置：解析注释-Type=Comment，解析文档类型-Type=DOCTYPE，解析标签(Type=StartTag/EndTag)

子状态机/解析注释：

子状态机/解析文档类型：

子状态机/解析标签名、属性名、属性值

最后以一个简单的HTML为例，描述解析过程：

First name:

1.解析文档类型

''，DataState状态迁移到TagOpenState状态

''，TagOpenState状态迁移到MarkupDeclarationOpenState状态

''，MarkupDeclarationOpenState状态迁移到DOCTYPEState状态

''，DOCTYPEState状态迁移到BeforeDOCTYPENameState状态

'html>'，BeforeDOCTYPENameState状态迁移到DOCTYPENameState状态，并执行beginDOCTYPE

'html>'，DOCTYPENameState状态迁移到DOCTYPENameState状态，并执行appendToName

'html>'，结束

2、解析注释

''，DataState状态迁移到TagOpenState状态

''，TagOpenState状态迁移到MarkupDeclarationOpenState状态

''，MarkupDeclarationOpenState状态迁移到CommentStartState状态

''，CommentStartState状态迁移到CommentState状态，并执行appendToComment

''，CommentState状态迁移到CommentState状态，并执行appendToComment

''，CommentState状态迁移到CommentEndDashState状态

''，CommentEndDashState状态迁移到CommentEndState状态

''，结束

3、解释'html'元素

''，DataState状态迁移到TagOpenState状态

''，TagOpenState状态迁移到TagNameState状态，并执行beginStartTag

''，TagNameState状态迁移到TagNameState状态，并执行appendToName

''，结束

4、解释'body'和'p'元素，同3

6、解析'p'元素内容

'First name:

'，DataState状态迁移到DataState状态，并执行bufferCharacter

'First name:

'，DataState状态迁移到DataState状态，并执行bufferCharacter

'First name:

'，判断bufferCharacter是否存在字符，存在则结束

7、解析'/p'元素

'

'，DataState状态迁移到TagOpenState状态

'

'，TagOpenState状态迁移到EndTagOpenState状态

'

'，EndTagOpenState状态迁移到TagNameState状态，并执行beginEndTag

'

'，结束

8、解析'input'元素

''，DataState -> TagOpenState

''，TagOpenState -> TagNameState，并执行beginStartTag

''，TagNameState -> TagNameState，并执行appendToName

''，TagNameState -> BeforeAttributeNameState

''，BeforeAttributeNameState -> AttributeNameState，并执行beginAttribute

''，AttributeNameState -> AttributeNameState，并执行appendToAttributeName

''，AttributeNameState -> BeforeAttributeValueState

''，BeforeAttributeValueState -> AttributeValueDoubleQuotedState

''，BeforeAttributeValueState -> AttributeValueDoubleQuotedState，并执行appendToAttributeValue

''，AttributeValueDoubleQuotedState -> AttributeValueDoubleQuotedState，并执行appendToAttributeValue

''，AttributeValueDoubleQuotedState -> AfterAttributeValueQuotedState，并执行endAttribute

''，AfterAttributeValueQuotedState-> BeforeAttributeNameState

''，BeforeAttributeNameState-> SelfClosingStartTagState

''，结束，并执行setSelfClosing

9、解析'/body'和'/html'元素，同7

参考文章：