WebKit之HTML元素支持流程

介绍下webkit对于html元素的解析流程.


DocumentLoader收到html后通过DocumentWriter调用HTMLDocumentParser::appendBytes,然后通过DocumentWriter解码后,调用HTMLDocumentParser::append添加到HTMLInputStream中,如果当前有js在执行,就调用HTMLPreloadScanner预先下载一些img和css资源,如果有被suspend,就等待HTMLParserScheduler来resume,调用HTMLTokenizer来获取一个HTMLToken,并且调用HTMLTreeBuilder来建立DOM Tree,如果有Script需要运行,就把HTMLTreeBuilder给pause,然后在下次获取Token前,通过HTMLScriptRunner来执行相应的Script。
解析过程中主要涉HTMLTreeBuilder.cpp,HTMLTokenizer.cpp,HTMLDocumentParser.cpp.其中setInsertionMode主要是记录解析的状态。

 


 

HTMLTokenizer提供了nextToken的方法用来解析HTMLInputStream,每次调用解析出一个token(包含tagname和其他的属性名和属性值)交给HTMLTreeBuilder的processToken方法进行处理。如下是具体的解析过程:

 

假设有下列HTML文件:

<html>

<head>

<link rel="prefetch" type="text/html" href="http://127.0.0.1/index.html" />

</head>

<body>

test

</body>

</html>

1. 解析到token的tagname为html,类型为StartTag,交给HTMLTreeBuilder的processToken的方法处理,processStartTag---->defaultForInitial--->setInsertionMode(BeforeHTMLMode)---> m_tree.insertHTMLHtmlStartTagBeforeHTML(token)--->创建html元素(HTMLHtmlElement类)的对象并m_openElements.pushHTMLHtmlElement--->Node.attach()
2. 解析到token的类型为character,交给HTMLTreeBuilder的processToken的方法处理,processCharacter(token)
3. 解析到token的tagname为head,类型为StartTag,交给HTMLTreeBuilder的processToken的方法处理,processStartTag----> m_tree.insertHTMLHeadElement(token)--->创建head元素(HTMLHeadElement类)的对象并m_openElements.pushHTMLHeadElement--->Node.attach()
4. 解析到token的类型为character,交给HTMLTreeBuilder的processToken的方法处理,processCharacter(token)
5. 解析到token的tagname为link,类型为StartTag,交给HTMLTreeBuilder的processToken的方法处理,processStartTag---> processStartTagForInHead(token)---> m_tree.insertSelfClosingHTMLElement(token)--->创建link元素(HTMLLinkElement类)的对象,进入HTMLLinkElement类进行一些实际的操作,比如检查属性,根据存在的属性进行相关操作。--->Node.attach()
6. 解析到token的类型为character,交给HTMLTreeBuilder的processToken的方法处理,processCharacter(token)
7. 解析到token的tagname为head,类型为EndTag,交给HTMLTreeBuilder的processToken的方法处理,processEndTag(token)---> m_tree.openElements()->popHTMLHeadElement()--->setInsertionMode(AfterHeadMode) --->Node.attach()
8. 解析到token的类型为character,交给HTMLTreeBuilder的processToken的方法处理,processCharacter(token)
9. 解析到token的tagname为body,类型为StartTag,交给HTMLTreeBuilder的processToken的方法处理, processStartTag(token)---> m_framesetOk = false--->创建body元素(HTMLBodyElement类)的对象并pushHTMLBodyElement(attachToCurrent(body元素的对象))---> attach(currentNode(), body对象)--->Node.attach()
10. 解析到token的类型为character,交给HTMLTreeBuilder的processToken的方法处理,processCharacter(token)---> processCharacterBuffer(buffer)--->获取到characters值为test--->m_tree.insertTextNode(characters)--->attachAtSite--->Text::attach()--->Node::createRendererIfNeeded()--->Node.attach()
11. 解析到token的tagname为body,类型为EndTag,交给HTMLTreeBuilder的processToken的方法处理, processEndTag(token)---> processEndTagForInBody(token)---> processBodyEndTagForInBody(token)---> setInsertionMode(AfterBodyMode)
12. 解析到token的类型为character,交给HTMLTreeBuilder的processToken的方法处理,processCharacter(token)---> processCharacterBuffer---> m_tree.insertTextNode(characters)
13. 解析到token的tagname为html,类型为EndTag,交给HTMLTreeBuilder的processToken的方法处理, processEndTag(token)---> processEndTagForInBody(token)---> setInsertionMode(AfterAfterBodyMode)
14. 解析到token的类型为EndOfFile,交给HTMLTreeBuilder的processToken的方法处理, processEndOfFile(token)---> m_tree.openElements()->popAll()将HTMLElementStack清空。

 

希望对大家有用,现在搞webkit的人真少~~~.

 

附有HTML5  a标签 

 

属性描述
charsetchar_encodingHTML 5 中不支持。
coordscoordinatesHTML 5 中不支持。
hrefURL链接的目标 URL。
hreflanglanguage_code规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediamedia query

规定目标 URL 的媒介类型。

默认值:all。仅在 href 属性存在时使用。

namesection_nameHTML 5 中不支持。
rel
  • alternate
  • archives
  • author
  • bookmark
  • contact
  • external
  • first
  • help
  • icon
  • index
  • last
  • license
  • next
  • nofollow
  • noreferrer
  • pingback
  • prefetch
  • prev
  • search
  • stylesheet
  • sidebar
  • tag
  • up

规定当前文档与目标 URL 之间的关系。

仅在 href 属性存在时使用。

revtextHTML 5 中不支持。
shape
  • default
  • rect
  • circle
  • poly
HTML 5 中不支持。
target
  • _blank
  • _parent
  • _self
  • _top
在何处打开目标 URL。仅在 href 属性存在时使用。
typemime_type

规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。

注:MIME = Multipurpose Internet Mail Extensions。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值