浏览器是怎样工作的二:渲染引擎 HTML解析(4)
发布时间: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树的构建
猜你喜欢
- 我一般看书喜欢做笔记,这份笔记不知道是什么时候看的什么书做的,也忘了是否是摘自其他地方,总之一份汇总,应该适合初学者,对于Javascrip
- UserAgent = Trim(Lcase(Request.Serve
- 通常的聊天室所采用的程序,也就是Chat程序了,其基本结构原理是不会采用到数据库的。那究竟采用什么技术呢?我们知道ASP变量当中Sessio
- 网页设计中,内容组织恐怕是最至关重要、最影响设计品质的方面了。如何将信息组织到好的布局中,是一个网站的基础,并且应该在考虑外观之前就决定好。
- 在许多情况下,当迁移至SQL Server 2008之前必须了解那些反对和放弃功能的具体情况。下文是几个主要功能在兼容性上的问题列表:1.S
- 现在大部分网站都使用asp+access构建,这样的话通过下载access数据库简单就可以对网站进行破坏! 而很多的网站都不太重
- 在SQL Server Management Studio 用WINDOWS连接的情况下改实列的“属性&rdqu
- 今天工作中遇到,拿出来说说。网上CSS下拉菜单不少,不过都存在这样那样的问题,主要问题是,如果你菜单下面有一个FLASH的话,很多都会被FL
- 404错误是指在服务器找不到指定的页面。404错误页面是可以自定义的。Smashing Magazine为我们挑选了40个有创意的404错误
- 每个产品诞生的背后都凝结着一位或是多位设计师的心血,在产品的诞生过程中文化、科技、环保、创意等这些方方面面的细节集结成一个绚丽的故事,因为有
- 身为一名小小的程序猿,在日常开发中不可以避免的要和where in和like打交道,在大多数情况下我们传的参数不多简单做下单引号、敏感字符转
- 网络上关于各种语言和应用软件的速查手册和快速参考指南有很多很多,不幸的是当我们需要的时候,总是很难找到,所以我决定花点时间尽可能的收集更多的
- 方法一一般情况下,SQL数据库的收缩并不能很大程度上减小数据库大小,其主要作用是收缩日志大小,应当定期进行此操作以免数据库日志过大1、设置数
- 这是我研究网页切片算法的一个汇总想法。之前我写过:一种面向搜索引擎的网页分块、切片的原理,实现和演示,随着工作的深入,逐渐碰到以
- <% Rem Rem ## 在线升级类声明 Class Cls_oUpdate
- 解决Microsoft VBScript 运行时错误 (0x800A0046) 没有权限的解决方案,0x800a0046错误。前段时间在做站
- 这些日子,几乎每个人都在谈论XML (Extensible Markup Language),但是很少有人真正理解其含义。XML的推崇者认为
- 说明:本函数作用是截取指定英汉混合字符串,并保持显示长度一至。就是将一个汉字当两英文来截取。用途:一般会用在标题显示列表,可以避免截取的字符
- <%Dim sc4Json Sub InitScriptControlSet sc
- 是时候了—— 在大部分情况下当用户输入密码时把它们用清晰的文字显示出来。一直以来,提供反馈、把系统状态形象化是最基本的可用性原则,当用户输入