浏览器是怎样工作的二:渲染引擎 HTML解析(3)
发布时间:2012-05-09 20:34:20
解析算法
如我们前面看到的,HTML无法使用自上而下或自下而上的解析器来解析。
理由如下:
语言的宽容特点
浏览器需要对无效HTML提供容错性的事实。
解析过程的反复。通常解析过程中源码不会变化。但在HTML中,script标签包含"document.write"时可以添加内容,即解析过程实际上还会改变源码。
浏览器创建了自己的解析器来解析HTML文档。
HTML5规范里对解析算法有具体的说明,解析由两部分组成:分词与构建树。
分词属于词法分析部分,它把输入解析成符号序列。在HTML中符号就是开始标签,结束标签,属性名称和属生值。
分词器识别这些符号并将其送入树构建者,然后继续分析处理下一个符号,直到输入结束。
图 6: HTML解析流程 (源自HTML5规范)
分词算法
算法的输出是HTML符号。算法可以用状态机来描述。 每一个状态从输入流中消费一个或多个字符,并根据它们更新下一状态。决策受当前符号状态和树的构建状态影响。这意味着同样的字符可能会产生不同的结果,取决于当前的状态。算法太复杂,我们用一个例子来看看它的原理。
基础示例,分析下面的标签:
<html>
<body>
Hello world
body>
html>
初始状态是"Data state",当遇到"<"时状态改为"Tag open state"。吃掉"a-z"字符组成的符号后产生了"Start tag token",状态变更为"Tag name state"。我们一直保持此状态,直到遇到">"。每个字符都被追加到新的符号名上。在我们的例子中,解出的符号就是"html"。
当碰到">"时,当前符号完成,状态改回"Data state"。""标签将会以同样的方式处理。现在"html"与"body"标签都完成了,我们回到"Data state"状态。吃掉"H"("Hello world"第一个字母)时会产生一个字符符号,直到碰到""的"<"符号,我们就完成了一个字符符号"Hello world"。
现在我们回到"Tag open state"状态。吃掉下一个输入"/"时会产生一个"end tag token"并变更为"Tag name state"状态。同样,此状态保持到我们碰到">"时。这时新标签符号完成,我们又回到"Data state"。同样""也会被这样处理。
图 9: 示例输入源的分词处理
树的构建算法
当解析器被创建时,文档对象也被创建了。在树的构建过程中DOM树的根节点(Documen)将被修改,元素被添加到上面去。每个分词器完成的节点都会被树构建器处理。规范中定义了每一个符号与哪个DOM对象相关。除了把元素添加到DOM树外,它还会被添加到一个开放元素堆栈。这个堆栈用于纠正嵌套错误和标签未关闭错误。这个算法也用状态机描述,它的状态叫做"insertion modes"。
让我们看看下面输入的树构建过程:
<html>
<body>
Hello world
body>
html>
树的构建过程中,输入就是分词过程中得到的符号序列。第一个模式叫"initial mode"。接收 html 符号后会变成"before html"模式并重新处理此模式中的符号。这会创建一个HTMLHtmlElement元素并追加到根文档节点。
然后状态改变为"before head"。我们收到"body"时,会隐式创建一个HTMLHeadElement,尽管我们没有这个标签,它也会被创建并添加到树中。
现在我们进入"in head"模式,然后是"after head",Body会被重新处理,创建HTMLBodyElement元素并插入,然后进入"in body"模式。
字符符号"Hello world"收到后会创建一个"Text"节点,所有字符都被一一追加到上面。
收到body结束标签后进入 "after body" 模式,收到html结束标签后进入"after after body"模式。所有符号处理完后将终止解析。
图 10: 示例HTML树的构建
猜你喜欢
- 此文译自Fred Wilson 2010年2月在迈阿密举行的Web未来应用的年会上的演讲谢谢青云推荐了这篇这么好的演说谢谢卓和百忙中抽空帮我
- 1 数据库连接a.数据库的连接(ACCESS和SQL)在APS脚本中可以通过3中方式访问数据库: ∈IDC (Inte
- *注意:本文的内容涉及到修改NTFS磁盘权限和设置安全策略,请务必在确认您了解操作可能的后果之后再动手进行任何的修改。文中提及的权限都是在原
- 看到网上一片文章,自己式了一下,果然 XMLTextReader速度要快!在.NET框架的System.XML名称空间中包含的XMLText
- 如果 replaceText 为函数,对于每一个匹配的子字符串,调用该函数时带有下面的 m+3 个参数,此处 m 是在 rgExp 中捕获的
- 应原书编辑要求,先在文章顶部给出链接:《Everything You Know About CSS Is Wrong》http://www.
- 如果是在Oracle10g之前,删除一个表空间中的数据文件后,其文件在数据库数据字典中会仍然存在,除非你删除表空间,否则文件信息不会清除。但
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- (下面的代码原来我想用折叠的代码的,但是在google里面老是添加不了折叠的代码,所以就整屏的贴出来了,望大家不要见外。) 朋友的比较好的存
- 这也是老早前整理的了,也贴出来吧:1. showModalDialog和showModelessDialog的异同
- 1 引言 在关系数据库(DB2,Oracle,Sybase,Informix和SQL Server)最小的恢复和交易单位为一个事务(Tran
- 昨天有位同事说,他的网页查询过程中发现普通索引和唯一索引的效率是有差别的,普通索引比唯一索引快,今天在我的虚拟机中布置了环境,测试抓图如下:
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- Request.ServerVariables里Server_Name与Http_Host之间有什么区别呢?如果不仔细看,您应该看不出它们之
- 有关JS中字符串的相关文章,现在网上大概不计其数了。这里我不想再就这个问题做过多的论述,只是对几种方式的实现在各种浏览器中的执行效率进行对比
- 用ASP代码实现对access数据库的在线压缩处理,注意压缩前请备份数据库。我们知道每个一段时间压缩一下access数据库,可以减少数据库的
- 首先创建一个表Use Test;Create Table TableTest(`ID` mediumint(8) default '
- 百度了一下,找了点别人的方法改进了一下。 获取天气网址:http://www.weather.com.cn/html/weather/101
- 为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不
- 本文介绍了6个asp常用的判断函数的语法和使用方法,有IsArray 函数,IsDate 函数 ,IsEmpty 函数,IsNull 函数,