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标签 

 

属性 描述
charset char_encoding HTML 5 中不支持。
coords coordinates HTML 5 中不支持。
href URL 链接的目标 URL。
hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用。
media media query

规定目标 URL 的媒介类型。

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

name section_name HTML 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 属性存在时使用。

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

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

注:MIME = Multipurpose Internet Mail Extensions。

你可能感兴趣的:(html,url,webkit,token,character,internet)