c 对html文档解析,Webkit之HTML解析

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

HTML解析部分时序图:

160442665_1_20190505030710751.png

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

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

HTML解析状态机:

160442665_2_20190505030711360.png

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

160442665_3_20190505030711798.gifclassHTMLToken {enumType {

Uninitialized,

DOCTYPE,

StartTag,

EndTag,

Comment,

Character,

EndOfFile,

};

} ;

160442665_3_20190505030711798.gif

对于1结束位置:Type=EndOfFile

对于2结束位置:Type=Character

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

子状态机/解析注释:

160442665_4_2019050503071247.png

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

160442665_5_20190505030712438.png

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

160442665_6_20190505030712891.png

160442665_7_20190505030713422.png

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

First name:

1.解析文档类型

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

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

'html>',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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值