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 ...
随机推荐
- 翻扣告诉你外出旅游时实用的一些小tips
很多人出行都会带着大包小包,东西胡乱塞成一团,导致每次要用的时候都翻个遍.所以今天游游君为大家推荐几个出门旅行的小技巧. 收拾行李时,把鞋子放进浴帽里.浴帽很容易洗干净,还可以防止鞋子把干净的衣服弄脏 ...
- bullet_01
#include <btBulletDynamicsCommon.h> #include <osgViewer/Viewer> #include <map> #in ...
- OSG+Python
测试平台(1)Fedora19 x86 [cc@localhost ~]$ lspci | grep VGA :) :00.0 VGA compatible controller: NVIDIA Co ...
- JSP的改动需要重启应用服务器才能生效？
PLM的版本由2013版升级到2016版,部署到应用服务器tomEE的war包也更新了,今天在Linux服务器上hot fix一个JSP页面的时候发现改动没有生效,要重启tomEE才生效,纳闷了一下才 ...
- table边框1px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- VC 中使用 CToolTipCtrl 消失后不再出现的Bug。。。。
最近用WTL重写CGdipButton.从ButtonST中将CtoolTipCtrl的相关代码转过来,发现一个问题: ToolTip可以显示,鼠标移开后再移动到button上也可以再次显示,但是按下 ...
- 关于WM_NCHITTEST消息
我为了移动一个无标题栏的窗体,使用了WM_NCHITTEST消息,这个消息大概如下: 通常,我们拖动对话框窗口的标题栏来移动窗口,但有时候,我们想通过鼠标在客户区上拖动来移动窗口. 一个容易想到的方案 ...
- NOIP2014-普及组复赛-第三题-螺旋矩阵
题目描述 Description 一个n行n列的螺旋矩阵可由如下方法生成: 从矩阵的左上角(第1行第1列)出发,初始时向右移动:如果前方是未曾经过的格子,则继续前进,否则右转:重复上述操作直至经过矩阵 ...
- 【笔记】Loadrunner添加OS类型为Windows的服务器(Win7)
最近在学习Loadrunner,看到“监控Windows资源”,决定小试一把,由于没有找到合适的镜像,暂时没有搞好Windows的虚拟机,so 先用自己小试牛刀了只有,不过这样子好像难度锐减也~只要小 ...
- 【VMware】VMware Workstation中虚拟机网络配置
一直用的vmware的虚拟机以及UVP还有cirtix的虚拟机,然后对vmware workstation却一窍不通,这个怎么了得,下面介绍一下我学习中遇到的问题及解决办法. 一.准备工作: vmwa ...