Webkit之HTML解析

加载部分HTML文本(即主资源)后便可以开始解析HTML元素(对输入字节流进行逐字扫描,识别HTML元素),最后生成DOM树,本文只讲HTML解析。

HTML解析部分时序图:

其中最为重要的过程是(1)startToken(2)nextToken(3)endToken(4)constructTreeFromHTMLToken,这里的4步是循环执行的,当输入字符结束时,则跳出循环。

HTMLTokenizer::nextToken则创建了token,然后可以根据token创建html元素,解析的整个过程就是一个状态机

HTML解析状态机:

初始状态为DataState,状态机结束后会返回一个HTMLToken对象,不同的结束方式(上图中有三个出口1、2、3)HTMLToken的类型也会不同。

class HTMLToken {
    enum Type {
        Uninitialized,
        DOCTYPE,
        StartTag,
        EndTag,
        Comment,
        Character,
        EndOfFile,
    };
} ; 

对于1结束位置:Type=EndOfFile

对于2结束位置:Type=Character

对于3结束位置:解析注释-Type=Comment,解析文档类型-Type=DOCTYPE,解析标签(Type=StartTag/EndTag)

子状态机/解析注释:

子状态机/解析文档类型:

子状态机/解析标签名、属性名、属性值

最后以一个简单的HTML为例,描述解析过程:

<!Doctype html>
<!--comment-->
<html>
<body>
<p>First name:</p>
<input type="text"/>
</body>
</html>

1.解析文档类型

‘<!Doctype html>‘,DataState状态迁移到TagOpenState状态

‘<!Doctype html>‘,TagOpenState状态迁移到MarkupDeclarationOpenState状态

‘<!Doctype html>‘,MarkupDeclarationOpenState状态迁移到DOCTYPEState状态

‘<!Doctype html>‘,DOCTYPEState状态迁移到BeforeDOCTYPENameState状态

‘<!Doctype html>‘,BeforeDOCTYPENameState状态迁移到DOCTYPENameState状态,并执行beginDOCTYPE

‘<!Doctype html>‘,DOCTYPENameState状态迁移到DOCTYPENameState状态,并执行appendToName

‘<!Doctype html>‘,结束

2、解析注释

‘<!--comment-->‘,DataState状态迁移到TagOpenState状态

‘<!--comment-->‘,TagOpenState状态迁移到MarkupDeclarationOpenState状态

‘<!--comment-->‘,MarkupDeclarationOpenState状态迁移到CommentStartState状态

‘<!--comment-->‘,CommentStartState状态迁移到CommentState状态,并执行appendToComment

‘<!--comment-->‘,CommentState状态迁移到CommentState状态,并执行appendToComment

‘<!--comment-->‘,CommentState状态迁移到CommentEndDashState状态

‘<!--comment-->‘,CommentEndDashState状态迁移到CommentEndState状态

‘<!--comment-->‘,结束

3、解释‘html‘元素

‘<html>‘,DataState状态迁移到TagOpenState状态

‘<html>‘,TagOpenState状态迁移到TagNameState状态,并执行beginStartTag

‘<html>‘,TagNameState状态迁移到TagNameState状态,并执行appendToName

‘<html>‘,结束

4、解释‘body‘和‘p‘元素,同3

6、解析‘p‘元素内容

‘First name:</p>‘,DataState状态迁移到DataState状态,并执行bufferCharacter

‘First name:</p>‘,DataState状态迁移到DataState状态,并执行bufferCharacter

‘First name:</p>‘,判断bufferCharacter是否存在字符,存在则结束

7、解析‘/p‘元素

‘</p>‘,DataState状态迁移到TagOpenState状态

‘</p>‘,TagOpenState状态迁移到EndTagOpenState状态

‘</p>‘,EndTagOpenState状态迁移到TagNameState状态,并执行beginEndTag

‘</p>‘,结束

8、解析‘input‘元素

‘<input type="text" />‘,DataState -> TagOpenState

‘<input type="text" />‘,TagOpenState -> TagNameState,并执行beginStartTag

‘<input type="text" />‘,TagNameState -> TagNameState,并执行appendToName

‘<input type="text" />‘,TagNameState -> BeforeAttributeNameState

‘<input type="text" />‘,BeforeAttributeNameState -> AttributeNameState,并执行beginAttribute

‘<input type="text" />‘,AttributeNameState -> AttributeNameState,并执行appendToAttributeName

‘<input type="text" />‘,AttributeNameState -> BeforeAttributeValueState

‘<input type="text" />‘,BeforeAttributeValueState -> AttributeValueDoubleQuotedState

‘<input type="text" />‘,BeforeAttributeValueState -> AttributeValueDoubleQuotedState,并执行appendToAttributeValue

‘<input type="text" />‘,AttributeValueDoubleQuotedState -> AttributeValueDoubleQuotedState,并执行appendToAttributeValue

‘<input type="text" />‘,AttributeValueDoubleQuotedState -> AfterAttributeValueQuotedState,并执行endAttribute

‘<input type="text" />‘,AfterAttributeValueQuotedState-> BeforeAttributeNameState

‘<input type="text" />‘,BeforeAttributeNameState-> SelfClosingStartTagState

‘<input type="text" />‘,结束,并执行setSelfClosing

9、解析‘/body‘和‘/html‘元素,同7

参考文章:

http://blog.csdn.net/dlmu2001/article/details/5998130

时间: 2024-11-12 05:38:35

Webkit之HTML解析的相关文章

浏览器的工作原理解析

PART1 有关浏览器的内核 一.Trident内核,代表产品IE Trident内核又称为IE内核.是微软开发的一种排版引擎.1997年与IE4一起诞生.虽然它相对于其它浏览器核心还比较落后,但trident一直在被不断地更新和完善.而且除IE外,许多产品都在使用Trident核心,比如Windows的HELP程序.RealPlayer.Windows Media Player.Windows Live Messager.Outlook Express等. 使用此内核的其它浏览器有:IE.傲游

Nginx配置抵御DDOS或CC攻击

防攻击的思路我们都明白,比如限制IP啊,过滤攻击字符串啊,识别攻击指纹啦.可是要如何去实现它呢?用守护脚本吗?用PHP在外面包一层过滤?还是直接加防火墙吗?这些都是防御手段.不过本文将要介绍的是直接通过nginx的普通模块和配置文件的组合来达到一定的防御效果. 验证浏览器行为 简易版 下面就是nginx的配置文件写法. if ($cookie_say != "hbnl"){ add_header Set-Cookie "say=hbnl"; rewrite .* &

PySide——Python图形化界面入门教程(六)

PySide——Python图形化界面入门教程(六) ——QListView和QStandardItemModel 翻译自:http://pythoncentral.io/pyside-pyqt-tutorial-qlistview-and-qstandarditemmodel/ 上一个教程中,我们讨论了Qt的QListWidget类,它用来实现简单的单列列表框(list boxes).然而,我们还需要更加灵活的widget来实现列表,Qt为此提供了QListView 来实现多种多样的项.它是一

现代浏览器的工作原理

浏览器的主要组件包括: 用户界面- 包括地址栏.后退/前进按钮.书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分 浏览器引擎- 用来查询及操作渲染引擎的接口 渲染引擎- 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来 网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作 UI 后端- 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接

[转载]浏览器的工作原理:新式网络浏览器幕后揭秘

原文地址 序言 这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果.在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码.她写道: 在 IE 占据 90% 市场份额的年代,我们除了把浏览器当成一个"黑箱",什么也做不了.但是现在,开放源代码的浏览器拥有了过半的市场份额,因此,是时候来揭开神秘的面纱,一探网络浏览器的内幕了.呃,里面只有数以百万行计的 C++ 代码.

社会化海量数据采集爬虫框架搭建

如果你对项目管理.系统架构有兴趣,请加微信订阅号"softjg",加入这个PM.架构师的大家庭 随着BIG DATA大数据概念逐渐升温,如何搭建一个能够采集海量数据的架构体系摆在大家眼前.如何能够做到所见即所得的无阻拦式采集.如何快速把不规则页面结构化并存储.如何满足越来越多的数据采集还要在有限时间内采集.这篇文章结合我们自身项目经验谈一下. 我们来看一下作为人是怎么获取网页数据的呢? 打开浏览器,输入网址url访问页面内容. 复制页面内容的标题.作者.内容. 存储到文本文件或者exc

(转载)How browsers work--Behind the scenes of modern web browsers (前端必读)

浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.com到你看到google主页过程中都发生了什么. 将讨论的浏览器 今天,有五种主流浏览器——IE.Firefox.Safari.Chrome及Opera. 本文将基于一些开源浏览器的例子——Firefox. Chrome及Safari,Safari是部分开源的. 根据W3C(World Wide Web Consortium 万维网联盟)的浏览器统计数据,当前(2011年5月),Fire

前端必读:浏览器内部工作原理

前端必读:浏览器内部工作原理 作者: Tali Garsiel  发布时间: 2012-02-09 14:32  阅读: 56974 次  推荐: 88   原文链接   [收藏] 目录 一.介绍 二.渲染引擎 三.解析与DOM树构建 四.渲染树构建 五.布局 六.绘制 七.动态变化 八.渲染引擎的线程 九.CSS2可视模型 英文原文:How Browsers Work: Behind the Scenes of Modern Web Browsers 一.介绍 浏览器可以被认为是使用最广泛的软

浏览器内部工作原理

转:http://kb.cnblogs.com/page/129756/#chapter9 目录 一.介绍 二.渲染引擎 三.解析与DOM树构建 四.渲染树构建 五.布局 六.绘制 七.动态变化 八.渲染引擎的线程 九.CSS2可视模型 英文原文:How Browsers Work: Behind the Scenes of Modern Web Browsers 一.介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到g