WebKit之HTML元素支持流程

来源：互联网发布：生产法工业增加值算法编辑：程序博客网时间：2024/05/22 01:40

介绍下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>

</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。