`
vvvvbbbb
  • 浏览: 21018 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

WebKit中的html词法解析

阅读更多
语言的解析一般分为词法分析(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(超文本标记语言)文档结构的工具,它能够帮助开发者确保HTML代码符合W3C标准,提高网页在不同浏览器中的兼容性和可读性。这个程序通常由一系列算法和规则组成,可以识别...

    WebKit培训

    2. **HTML解析**:WebKit使用基于词法分析和语法分析的解析器来处理HTML文档。了解HTML5的解析规则以及如何处理错误和不完整的HTML对优化网页加载至关重要。 3. **CSS布局与渲染**:WebKit的LayoutEngine负责构建和...

    关于webkit各种资料的整理

    2. **JavaScript引擎**:深入JavaScriptCore,理解词法分析、语法解析、JIT编译等过程。 3. **网络层**:分析`WebKit2`或`WebKitGTK+/WebKitQt`中的网络模块,学习如何处理HTTP请求和响应。 4. **事件处理**:研究...

    How webkit works

    ### WebKit工作原理详解 ...从解析HTML文档到最终呈现网页内容,WebKit都发挥了至关重要的作用。理解WebKit的工作原理不仅有助于开发者更好地编写兼容性强的网页应用,还能帮助他们解决实际开发中遇到的各种问题。

    webkit介绍及总结

    - **WebCore**:WebKit的核心部分,负责处理数据IO、页面加载、脚本解析、UI组织、事件处理等核心功能。 - **xml**:XML相关处理。 - **html**:HTML相关处理,包括3D画布和WebGL库支持。 - **wml**:无线标记...

    CSS解析源代码

    例如,开源项目如WebKit(Safari和Chrome的渲染引擎)和Gecko(Firefox的渲染引擎)提供了CSS解析的源代码,供开发者研究和学习。这些源代码通常用C++编写,包含复杂的解析函数和数据结构,如CSSParserImpl、...

    c++ html编辑器

    这可能涉及解析HTML文档以识别元素和属性,使用词法分析和语法分析技术。 4. **代码完成与自动补全**:为了提高效率,编辑器应提供HTML标签和属性的自动补全功能。这通常需要一个包含常见HTML标签和属性的数据库,...

    浏览器的工作原理:现代网络浏览器幕后揭秘 - HTML5 Rocks1

    1. **解析和DOM树构建**:当浏览器收到HTML文档后,会通过解析器和词法分析器将其转换为解析树。解析过程中,浏览器会遵循HTML的非上下文无关的语法,处理DTD(文档类型定义),并构建DOM(文档对象模型)树。DOM树...

    浏览器工作原理浅析

    1. **符号化**:词法分析的过程,将输入解析为符号。 2. **构建树**:根据符号构建DOM树。 - **HTML DTD**:HTML文档类型定义,定义了HTML的解析语法。 - **DOM树**:HTML解析器输出的树,由DOM元素及属性节点组成...

    浏览器工作原理

    浏览器中的解析器负责将原始文本数据转化为计算机可处理的形式,主要包括以下步骤: 1. **词法分析**: 将输入文本分解成一系列有意义的标记。 2. **语法分析**: 应用语言的语法规则以构建解析树。 3. **构建DOM树**...

    how browsers work

    - **算法**: 在解析过程中,浏览器会根据HTML语法定义,通过词法分析和语法分析构建DOM树。 - **错误容忍**: 浏览器对HTML语法错误具有很高的容忍度,会尝试修复错误并继续解析。 ##### 2. CSS解析 - **CSS解析器*...

    How browsers work

    在解析的过程中,浏览器通过特定的算法将输入的HTML标记流转化为结构化的DOM(文档对象模型)树。DOM树表示文档的结构化表示,是Web页面的内部表示。 在构建DOM树时,浏览器会根据HTML规范定义的语法规则来进行解析...

    基于Linux的嵌入式浏览器的设计及实现.pdf

    2. **解析引擎**:浏览器的核心部分是解析器,负责解析HTML、XML等网页内容,分为词法分析器和语法分析器。词法分析器将源代码分解为词元,语法分析器则根据词元构造出解析树,从而理解和呈现网页结构。 3. **渲染...

    浏览器源码

    2. **渲染引擎**:渲染引擎(如WebKit、Blink或Gecko)负责解析HTML、CSS,并构建文档对象模型(DOM)。它还要处理JavaScript的执行,以及页面布局和绘制。在源码中,这部分通常由多个层次的类组成,如解析器、样式...

    MyBrowserEx.zip

    这可能涉及到解析器设计,如递归下降解析器或词法分析器。 - **布局与渲染**:浏览器还需要对解析出的DOM树进行布局计算,生成像素级别的渲染指令,然后由GPU执行绘制。WebKit或Blink等开源渲染引擎可供参考。 4. ...

    V8引擎 google

    在 HTML5 中,W3C 还试图制定 BOM 规范。 - **ECMA262 标准** - **概述**:ECMA262 定义了 JavaScript 的语法和语言特性,包括内置对象和方法的定义。V8 和其他 JavaScript 引擎都需要遵循这个标准。 综上所述,...

    面试.docx

    3. **DOCTYPE**:用于声明文档类型,告诉浏览器以哪种模式解析HTML,例如`&lt;!DOCTYPE html&gt;`声明的是HTML5标准模式。 4. **div+css布局 vs table布局**:div+css布局更灵活,可维护性更强,有利于SEO,而table布局不...

    前端开发面试.pdf

    ### 前端开发面试知识点解析 #### 一、HTML&CSS 1. **Web标准的理解**: - Web标准是一系列制定好的规则和指南,目的是为了使网站更易访问、更易于维护,并且能够更好地适应不同的设备。主要包括HTML、CSS、DOM、...

Global site tag (gtag.js) - Google Analytics