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
Webkit之HTML解析的更多相关文章
- fedora环境安装webkit支持作爬虫下载解析JS
环境: 我使用的fedora19.1-xfce版本,属于redhat系的桌面环境. 1.安装 webkit源码安装webkit失败,这里提供的是yum安装方式. a.查看当前yum库中的webkit资 ...
- webkit模块介绍
一.Webkit模块 用到的第三方库如下: cairo 一个2D绘图库 casqt Unicode处理用的库,从QT中抽取部分代码形成的 expat 一个XML SAX解析器的库 freety ...
- 浏览器内部工作原理--作者：Tali Garsiel
本篇内容为转载,主要用于个人学习使用,作者:Tali Garsiel 一.介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google.com到你看到 ...
- How browsers work
这几天翻译一篇旧文 How browsers work ( 以现代浏览器chrome.火狐.safari 为对象来分析),这篇文章网上有其他的翻译版本,自己再翻译一遍主要是练习阅读英文文章,而且自己翻 ...
- 如何在html中做圆角矩形和 只有右边的"分隔线"
这个网站满好的,可以常看看 css-matic中有几个很好的写css可视化的工具 其实做css 版式布局等都可以有工具的 推荐40个优秀的免费CSS工具 debugger正则表达式在线 其实是对(理论 ...
- 通过nginx配置文件抵御攻击
通过nginx配置文件抵御攻击 囧思九千 · 2013/11/12 12:22 0x00 前言 大家好,我们是OpenCDN团队的Twwy.这次我们来讲讲如何通过简单的配置文件来实现nginx防御攻击 ...
- 【转】CSS3 transition规范的实际使用经验
原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...
- Python分布式爬虫原理
转载 permike 原文 Python分布式爬虫原理 首先,我们先来看看,如果是人正常的行为,是如何获取网页内容的. (1)打开浏览器,输入URL,打开源网页 (2)选取我们想要的内容,包括标题,作 ...
- CSS3 transition规范的实际使用经验
本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...
随机推荐
- Android ListView 无法响应onItemClick事件
当在布局文件中加入了Button.ImageButton.CheckBox.RadioButton等控件(也就是Button或者Checkable的子类控件)的时候,listView是无法响应onIt ...
- git clone 出现 RPC failed 错误的解决方案
今天使用git clone一个大型项目的时候出现了如下错误:
- delphi 容错提示语句汇总
打开文件失败的容错提示语句 try if OpenDialog1.Execute then begin MyList.Clear; MyList.LoadFromFile(OpenDialog1.Fi ...
- 有关下行HARQ的一切
1. 对于下行HARQ,有几种类型的下行传输需要UE反馈ACK/NACK 动态调度的下行传输:UE收到一个使用C-RNTI或TC-RNTI(对应随机接入过程中的Msg4)加扰的PDCCH和PDSCH, ...
- [ An Ac a Day ^_^ ] CodeForces 426C Sereja and Swaps 优先队列
题意: 给你一个有n个数的序列 取一个区间 这个区间内的数可以与区间外的值交换k次 问这样的区间最大值是多少 思路: 看数据是200 时间复杂度O(n*n) 应该可以暴力 顺便学习一下优先队列 枚举区 ...
- digitalocean更换机房教程
使用本站优惠链接注册digitalocean账户,可获赠10美元digitalocean优惠码.新用户点击create,即可创建一台新的vps,10美元余额足够你使用一台512MB内存的vps长达两月 ...
- 【Office Web Apps】在 SharePoint 中使用 Office Web Apps
在 SharePoint 中使用 Office Web Apps 在安装并配置了 Microsoft Office Web Apps 的 SharePoint 网站上,通过 Office Web Ap ...
- def语句常见错误
自觉不才,使用def语句时容易出现以下错误, 参考: 习题—25 http://www.2cto.com/shouce/Pythonbbf/ex25.html def add(): print &qu ...
- Ztree手风琴效果(第三版)
第一版:点击一级目录展开,再点击时不能收回 第二版:点击一级目录展开,再点击时可以收回 第三版:优化样式,修复主菜单下的子菜单下级无子节点时点击无反应问题(js报错) <%@ page lang ...
- iOS 自定义导航栏笔记
一.UINavigationBar的结构 导航栏几乎是每个页面都会碰到的问题,一般两种处理方式:1.隐藏掉不显示 2.自定义 1. 添加导航栏 TestViewController * mainVC ...