语言的解析一般分为词法分析(lexical analysis)和语法分析(Syntax analysis)两个阶段,WebKit中的html解析也不例外,本文主要讨论词法分析。
词法分析的任务是对输入字节流进行逐字扫描,根据构词规则识别单词和符号,分词。
在WebKit中,有两个类,同词法分析密切相关,它是HTMLToken和HTMLTokenizer类,可以简单将HTMLToken类理解为标记,HTMLTokenizer类理解为词法解析器。HTML词法解析的任务,就是将输入的字节流解析成一个个的标记(HTMLToken),然后由语法解析器进行下一步的分析。
在XML/HTML的文档解析中,token这个词经常用到,我将其理解为一个有完整语义的单元(也就是分出来的“词”),一个元素通常对应于3个 token,一个是元素的起始标签,一个是元素的结束标签,一个是元素的内容,这点同DOM树是不一样的,在DOM树上,起始标签和结束标签对应于一个元素节点,而元素内容对应另一个节点。
除了起始标签(StartTag)、结束标签(EndTag)和元素内容(Character),HTML标签还有DOCTYPE(文档类型),Comment(注释),Uninitialized(默认类型)和EndOfFile(文档结束)等类型,参见HTMLToken.h中的 Type枚举。
htmltoken
上图是HTMLToken类的成员变量,从中我们可以看到一个标记的组成:类型,在字节流中的偏移,数据(m_data,不同的类型具有不同的意义),文档类型,是否自封闭(对于开始和结束标签),属性列表,当前属性。
HTMLTokenizer就是要从字节流解析出一个个这样的结构体来,他的实现是基于状态机来做的,状态机模型在http://www.w3.org/TR/html5/tokenization.html#tokenization中已经明确定义,nextToken方法实现了该状态机。
对有限状态机不熟悉的童子建议先学习下absurd大大的文章系统程序员成长计划-文本处理(一)状态机(http://blog.csdn.net/absurd/archive/2009/06/07/4249569.aspx)。
下面以一个简单的html文档来复盘状态机的几条路线。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--comment -->
<html>
<body>
<a href=”w3c.org”>w3c</a>
</body>
</html>
不考虑类似<html>和<body>之间的回车换行(webkit里面有做特殊处理,也就是所谓的“authoring convenience”,m_skipLeadingNewLineForListing),从前面的描述中,我们可以确认,该文档有9个 HTMLToken,分别是文档类型声明,注释,html的起始标签,body的起始标签,a的起始标签,a的元素内容,a的介绍标签,body的结束标签,html的结束标签。
起始状态为DataState。
1)DOCTYPE
DataState:<!DOCTYPE,碰到’<’,进入TagOpenState
TagOpenState:<!DOCTYPE, 碰到’!’,进入MarkupDeclarationOpenState状态
MarkupDeclarationOpenState:<!DOCTYPE,碰到’D’,匹配DOCTYPE和--字数都不够,保持现状
MarkupDeclarationOpenState:<!DOCTYPE,匹配doctype,进入DOCTYPEState状态(HTMLToken的type为DOCTYPE)
DOCTYPEState: <!DOCTYPE html PUBL,碰到空格,进入BeforeDOCTYPENameState状态
BeforeDOCTYPENameState: <!DOCTYPE html PUBL,碰到’h’,进入DOCTYPENameState
DOCTYPENameState: <!DOCTYPE html PUBL,碰到’t’,保持原状态,提取html作为文档类型
DOCTYPENameState: <!DOCTYPE html PUBL,碰到空格,进入AfterDOCTYPENameState状态。(HTMLToken的m_data为
html)
AfterDOCTYPENameState:<!DOCTYPE html PUBLIC,碰到’P’,还未能匹配Public或者system,保持状态
AfterDOCTYPENameState:<!DOCTYPE html PUBLIC,匹配public,进入AfterDOCTYPEPublicKeywordState
AfterDOCTYPEPublicKeywordState:<!DOCTYPE html PUBLIC "-/,碰到空格,进入BeforeDOCTYPEPublicIdentifierState
BeforeDOCTYPEPublicIdentifierState:<!DOCTYPE html PUBLIC "-/,碰到’”’,进入
DOCTYPEPublicIdentifierDoubleQuotedState
DOCTYPEPublicIdentifierDoubleQuotedState:<!DOCTYPE html PUBLIC "-/,碰到’-‘,保持状态,提取m_publicIdentifier
DOCTYPEPublicIdentifierDoubleQuotedState:<!DOCTYPE html PUBLIC "-/…nal//EN">,碰到’”’,进入
AfterDOCTYPEPublicIdentifierState 状态。(HTMLToken的m_publicIdentifier确定)
AfterDOCTYPEPublicIdentifierState:<!DOCTYPE html PUBLIC "-/…nal//EN"> ,碰到’>’,进入DataState状态,完成文档类型
的解析
2)COMMENT
DataState:<!--comment -->,碰到’<’,进入TagOpenState
TagOpenState:<!--comment -->, 碰到’!’,进入MarkupDeclarationOpenState状态
MarkupDeclarationOpenState:<!--comment -->,碰到’-’,匹配DOCTYPE和--字数都不够,保持现状
MarkupDeclarationOpenState:<!--comment -->,匹配--,进入CommentStartState状态(HTMLToken的type为COMMENT)
CommentStartState: <!--comment -->,碰到’c’,进入CommentState
CommentState:<!--comment -->,碰到’-‘,进入CommentEndDashState状态(HTMLToken的m_data为comment)
CommentEndDashState: <!--comment -->,碰到’-‘,进入CommentEndState状态
CommentEndState:<!--comment -->,碰到’>‘,进入DataState状态,完成解析。
3)起始标签a
DataState:<a href=”w3c.org”>,碰到’<’,进入TagOpenState状态
TagOpenState:<a href=”w3c.org”>,碰到’a’,进入TagNameState状态(HTMLToken的type为StartTag)
TagNameState:<a href=”w3c.org”>,碰到空格,进入BeforeAttributeNameState状态(HTMLToken的m_data为a)
BeforeAttributeNameState:<a href=”w3c.org”>,碰到‘h’,进入AttributeNameState状态
AttributeNameState:<a href=”w3c.org”>,碰到‘=’,进入BeforeAttributeValueState状态(HTMLToken
属性列表中加入一个属性,属性名为href)
BeforeAttributeValueState: <a href=”w3c.org”>,碰到‘“’,进入AttributeValueDoubleQuotedState状态
AttributeValueDoubleQuotedState:<a href=”w3c.org”>,碰到‘w’,保持状态,提取属性值
AttributeValueDoubleQuotedState:<a href=”w3c.org”>,碰到‘“’,进入AfterAttributeValueQuotedState
(HTMLToken当前属性的值为w3c.org).
AfterAttributeValueQuotedState: <a href=”w3c.org”>,碰到‘>’,进入DataState,完成解析。
在完成startTag的解析的时候,会在解析器中存储与之匹配的end标签(m_appropriateEndTagName),等到解析end标签的时候,会同它进行匹配(语法解析的时候)。
html,body起始标签类似a起始标签,但没有属性解析
4)a元素
DataState:w3c</a>,碰到’w’,维持原状态,提取元素内容(HTMLToken的type为character)。
DataState:w3c</a>,碰到’<’,完成解析,不consume ’<’。(HTMLToken的m_data为w3c)。
5)a结束标签
DataState:w3c</a>,碰到’<’,进入TagOpenState。
TagOpenState:w3c</a>,碰到’/’,进入到EndTagOpenState。(HTMLToken的type为endTag)。
EndTagOpenState:w3c</a>,碰到’a’,进入到TagNameState。
TagNameState:w3c</a>,碰到’>’,进入到DataState,完成解析。
通过以上的复盘,一个标记的token过程清晰呈现在眼前,基本上就是实现http://www.w3.org/TR/html5/tokenization.html这一章的一个过程,html的规范是相当宽松的,所以词法解析要考虑到的问题很多,html5 specfication在这方面为实现者做了绝大部分工作。
另外,html的语法解析会影响词法解析,比如语法解析在解析到head里面title的起始标签后,会将htmltokenizer解析器的状态设置为RCDATAState。
分享到:
相关推荐
HTML语法分析程序是一种用于检查和解析HTML(超文本标记语言)文档结构的工具,它能够帮助开发者确保HTML代码符合W3C标准,提高网页在不同浏览器中的兼容性和可读性。这个程序通常由一系列算法和规则组成,可以识别...
2. **HTML解析**:WebKit使用基于词法分析和语法分析的解析器来处理HTML文档。了解HTML5的解析规则以及如何处理错误和不完整的HTML对优化网页加载至关重要。 3. **CSS布局与渲染**:WebKit的LayoutEngine负责构建和...
2. **JavaScript引擎**:深入JavaScriptCore,理解词法分析、语法解析、JIT编译等过程。 3. **网络层**:分析`WebKit2`或`WebKitGTK+/WebKitQt`中的网络模块,学习如何处理HTTP请求和响应。 4. **事件处理**:研究...
### WebKit工作原理详解 ...从解析HTML文档到最终呈现网页内容,WebKit都发挥了至关重要的作用。理解WebKit的工作原理不仅有助于开发者更好地编写兼容性强的网页应用,还能帮助他们解决实际开发中遇到的各种问题。
- **WebCore**:WebKit的核心部分,负责处理数据IO、页面加载、脚本解析、UI组织、事件处理等核心功能。 - **xml**:XML相关处理。 - **html**:HTML相关处理,包括3D画布和WebGL库支持。 - **wml**:无线标记...
例如,开源项目如WebKit(Safari和Chrome的渲染引擎)和Gecko(Firefox的渲染引擎)提供了CSS解析的源代码,供开发者研究和学习。这些源代码通常用C++编写,包含复杂的解析函数和数据结构,如CSSParserImpl、...
这可能涉及解析HTML文档以识别元素和属性,使用词法分析和语法分析技术。 4. **代码完成与自动补全**:为了提高效率,编辑器应提供HTML标签和属性的自动补全功能。这通常需要一个包含常见HTML标签和属性的数据库,...
1. **解析和DOM树构建**:当浏览器收到HTML文档后,会通过解析器和词法分析器将其转换为解析树。解析过程中,浏览器会遵循HTML的非上下文无关的语法,处理DTD(文档类型定义),并构建DOM(文档对象模型)树。DOM树...
1. **符号化**:词法分析的过程,将输入解析为符号。 2. **构建树**:根据符号构建DOM树。 - **HTML DTD**:HTML文档类型定义,定义了HTML的解析语法。 - **DOM树**:HTML解析器输出的树,由DOM元素及属性节点组成...
浏览器中的解析器负责将原始文本数据转化为计算机可处理的形式,主要包括以下步骤: 1. **词法分析**: 将输入文本分解成一系列有意义的标记。 2. **语法分析**: 应用语言的语法规则以构建解析树。 3. **构建DOM树**...
- **算法**: 在解析过程中,浏览器会根据HTML语法定义,通过词法分析和语法分析构建DOM树。 - **错误容忍**: 浏览器对HTML语法错误具有很高的容忍度,会尝试修复错误并继续解析。 ##### 2. CSS解析 - **CSS解析器*...
在解析的过程中,浏览器通过特定的算法将输入的HTML标记流转化为结构化的DOM(文档对象模型)树。DOM树表示文档的结构化表示,是Web页面的内部表示。 在构建DOM树时,浏览器会根据HTML规范定义的语法规则来进行解析...
2. **解析引擎**:浏览器的核心部分是解析器,负责解析HTML、XML等网页内容,分为词法分析器和语法分析器。词法分析器将源代码分解为词元,语法分析器则根据词元构造出解析树,从而理解和呈现网页结构。 3. **渲染...
2. **渲染引擎**:渲染引擎(如WebKit、Blink或Gecko)负责解析HTML、CSS,并构建文档对象模型(DOM)。它还要处理JavaScript的执行,以及页面布局和绘制。在源码中,这部分通常由多个层次的类组成,如解析器、样式...
这可能涉及到解析器设计,如递归下降解析器或词法分析器。 - **布局与渲染**:浏览器还需要对解析出的DOM树进行布局计算,生成像素级别的渲染指令,然后由GPU执行绘制。WebKit或Blink等开源渲染引擎可供参考。 4. ...
在 HTML5 中,W3C 还试图制定 BOM 规范。 - **ECMA262 标准** - **概述**:ECMA262 定义了 JavaScript 的语法和语言特性,包括内置对象和方法的定义。V8 和其他 JavaScript 引擎都需要遵循这个标准。 综上所述,...
3. **DOCTYPE**:用于声明文档类型,告诉浏览器以哪种模式解析HTML,例如`<!DOCTYPE html>`声明的是HTML5标准模式。 4. **div+css布局 vs table布局**:div+css布局更灵活,可维护性更强,有利于SEO,而table布局不...
### 前端开发面试知识点解析 #### 一、HTML&CSS 1. **Web标准的理解**: - Web标准是一系列制定好的规则和指南,目的是为了使网站更易访问、更易于维护,并且能够更好地适应不同的设备。主要包括HTML、CSS、DOM、...