加载部分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

Webkit之HTML解析的更多相关文章

  1. fedora环境安装webkit支持作爬虫下载解析JS

    环境: 我使用的fedora19.1-xfce版本,属于redhat系的桌面环境. 1.安装 webkit源码安装webkit失败,这里提供的是yum安装方式. a.查看当前yum库中的webkit资 ...

  2. webkit模块介绍

    一.Webkit模块   用到的第三方库如下:   cairo 一个2D绘图库 casqt Unicode处理用的库,从QT中抽取部分代码形成的 expat 一个XML SAX解析器的库 freety ...

  3. 浏览器内部工作原理--作者：Tali Garsiel

    本篇内容为转载,主要用于个人学习使用,作者:Tali Garsiel 一.介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到 ...

  4. How browsers work

    这几天翻译一篇旧文 How browsers work ( 以现代浏览器chrome.火狐.safari 为对象来分析),这篇文章网上有其他的翻译版本,自己再翻译一遍主要是练习阅读英文文章,而且自己翻 ...

  5. 如何在html中做圆角矩形和 只有右边的"分隔线"

    这个网站满好的,可以常看看 css-matic中有几个很好的写css可视化的工具 其实做css 版式布局等都可以有工具的 推荐40个优秀的免费CSS工具 debugger正则表达式在线 其实是对(理论 ...

  6. 通过nginx配置文件抵御攻击

    通过nginx配置文件抵御攻击 囧思九千 · 2013/11/12 12:22 0x00 前言 大家好,我们是OpenCDN团队的Twwy.这次我们来讲讲如何通过简单的配置文件来实现nginx防御攻击 ...

  7. 【转】CSS3 transition规范的实际使用经验

    原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...

  8. Python分布式爬虫原理

    转载 permike 原文 Python分布式爬虫原理 首先,我们先来看看,如果是人正常的行为,是如何获取网页内容的. (1)打开浏览器,输入URL,打开源网页 (2)选取我们想要的内容,包括标题,作 ...

  9. CSS3 transition规范的实际使用经验

    本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...

随机推荐

  1. Linux shell 操作 postgresql，并设置crontab任务

    Linux shell 操作 postgresql:删除间隔日期的数据-删除指定日期的数据-vacuumdb 清理数据库 -清理日志 -定期执行脚本 *修改pg_hba.conf 设置本地连接无密码, ...

  2. Implementing a builder: Zero and Yield

    原文地址:http://fsharpforfunandprofit.com/posts/computation-expressions-builder-part1/ 前面介绍了bind和continu ...

  3. .Net Core 常见问题整理

    1.安装时报0x80070490 找不到元素 这里应该是vs只装了web没有装c++ 下载一个 VC_redist.x64.exe 安装就行了 https://github.com/dotnet/co ...

  4. js 有关字符串的函数 以及一些和字符串有关的知识

    JS自带函数 concat 将两个或多个字符的文本组合起来,返回一个新的字符串. var a = "hello"; var b = ",world"; var ...

  5. 推荐两个好用的Xcode插件（提供下载链接）

    这里推荐两款好用的Xcode插件,并提供下载链接. 一.插件和使用如下: 1.两款插件 对项目中图片提供自动提示功能的插件:KSImageNamed-Xcode-master 提供快速创建自动注释:V ...

  6. 使用block函数的基本形式

    以前从未接触过block函数. 如果在.h头文件中定义的形式如下的话: @property (nonatomic, copy) void(^fontValueChangedBlock)(void); ...

  7. User already has more than 'max_user_connections' active connections

    vi /etc/my.cnf修改  max_user_connections 参数的数值,重启 MySQL 服务器

  8. 如何用Navicat for MySQL 将mysql中的数据库导出,导入。

    数据库导出 1.双击要导出的数据库,右键选转储SQL文件...,选择要保存的文件夹. 2.点击开始后,开始导出. 数据库导入 1.新建数据库,数据库的名字必须和导入的数据库文件一致. 2.在新建的数据 ...

  9. js预编译

    先来做三个测试 eg1: var a; a = 1; function a() {}; console.log(a); eg2: var a; function a() {}; console.log ...

  10. Android自动测试之Monkey工具

    Monkey工具 前言: 最 近开始研究Android自动化测试方法,对其中的一些工具.方法和框架做了一些简单的整理,其中包括android测试框架.CTS.Monkey. Monkeyrunner. ...