首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

浏览器怎么解析HTML

2012-09-11 
浏览器如何解析HTML/**-----------------------------------------------从传输原理上面讲---------------

浏览器如何解析HTML

/**-----------------------------------------------从传输原理上面讲---------------------------------------------**/

概述

为HTML文档尽早指定字符编码,可以让浏览器立刻开始执行脚本。

细节

HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定,也可以在文档的 HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。如果不知道如何构造一个页面的字符,浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流,缓冲的同时它们也要查找相关的字符编码设定(一个值得注意的例外是IE6/7/8)。

不同浏览器需要缓冲的字节流数量不同,另外如果找不到编码设定,各浏览器默认的编码也不同。但是不管哪一种浏览器,如果在已经缓冲了足够的字节流、开始渲染页面之后才发现指定的编码设定与其默认值不同,都会导致重新解析文档并重绘页面。如果编码的变化影响到了外部资源(例如css\js\media),浏览器甚至会重新对资源进行请求。

为了避免这些延迟,对任何超过1k(精确地说是1024字节,这是我们测试过的所有浏览器的最大缓冲限制)的HTML文档,要尽早指定字符编码。

建议

通过HTTP头信息或meta标签指定编码

为HTML文档指定编码设定有几种方式:

服务器端:通过web服务器的配置来指定编码参数,为所有text/html类型的文档指定带有正确编码信息的Content-Type头信息。例如Content-Type: text/html;charset=UTF-8

客户端:在HTML代码中包含http-equiv="content-type"的meta标签,并指定字符编码。例如 。

如果可能的话,为你的web服务器做指定字符编码的HTTP头信息配置。某些浏览器(例如Firefox)在执行JavaScript之前会用(比 其它浏览器)更短的延迟缓冲来检查头信息中是否指定字符编码。这意味着它们可以跳过对HTML标签的检查,缩短缓冲的字节数和延迟时间。

把meta标签放在head区域的最前面

如果你不能对web服务器配置进行修改,又需要通过meta标签指定编码,要确保你用于指定编码的meta标签是文档中head标签的第一个子元 素。浏览器会在文档的前1024字节中寻找字符编码参数,因此为了避免性能损耗,编码参数在文档头部越早出现越好(译注:在IE6以下的版本中,特定情况 下,如果该meta标签不是head的第一个子元素,则会被忽略。具体触发情况尚未进行仔细测试,初步估计是与web服务器配置的默认编码或浏览器默认编码有关)。

始终指定文档类型

在浏览器开始检查字符编码设定前,它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型(content-type),浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟,而且还会带来安全漏洞。

务必指定正确的字符编码

你在HTTP头信息或meta标签中指定的字符编码设置一定要和编辑HTML文档时的实际字符编码一致,这非常重要。另外,如果同时通过HTTP头信息和Meta标签两种方式指定了字符编码,它们一定要保持一致。否则浏览器发现两者相互矛盾,会造成页面渲染错误或者为了重绘页面而造成额外的延迟。有关这一点,你可以阅读HTML 4.01规范(英文)中的5.2节:字符编码(英文)。


/**-----------------------------------------------从算法上面讲--------------------------------------------------**/

?

浏览器在解析HTML文档时,会把HTML解析为一种称为文档对象模型(Document Object Model)的对象集合,简称DOM。DOM的结构是树状的。
如果学过编程的话,对于“对象”和“树”的概念一定不陌生,不过如果没学过的话,那我还是要好好说说。

对象是一个编程的概念,可以说是把一堆有关联的函数和变量封装起来,称为“类”,变量称为“属性”,函数称为“方法”。属于这个“类”的称为“实例”。
比如我们把“人”这个概念封装为对象,身高、体重这些是属性,走、跳等是方法。老夏是“人”这个类的一个实例,我也是“人”这个类的一个实例。
尽管我和老夏是不同的“人”的实例,各项属性也不一定相同,但是我们都可以实现相同的方法,而不用管这个方法实现上的差异(比如老夏走起来可能一步1米,而我只有0.5米,“步距”也是我们的之间不同的属性,但是走的方法是一样的)。

当然,在HTML中,每个元素都是一个对象实例,这些元素都有不同的属性,有的属性是我们在HTML中可以设定的,有的属性是浏览器解析HTML文档是生成的。属性也可以是另一个对象。
每个元素也都有自己的方法,虽然我们这里不讲,但是学习JavaScript的话就会接触到了。
此外还有一种特殊的称为“事件”的属性,是根据一些状态的改变来触发一些动作的。事件属性在HTML中我们也稍有介绍。

树是一种数据结构,也就是组织数据之间的关系的。树是由一个一个的节点和他们之间有层次的关系组成的。
和现实中的树类似,树都有一个根节点,但是计算机中的树一般是倒着画的,也就是说根是在最上面的。
根节点下面可以有多个子节点,子节点下面也可以有更多的子节点。
没有子节点的节点称为“叶节点”。
上一级的节点称为父节点,一个节点只能有一个父节点。
所有上级的节点(父节点,父节点的父节点,父节点的父节点的父节点……)称为“祖先节点”,所有下级节点(子节点,子节点的子节点,子节点的子节点的子节点……)称为“后代节点”(或“子孙”)。
有同一个父节点的节点称为兄弟节点,父节点是兄弟节点的两个节点称为堂兄弟节点。
每一个节点和他的所有后代节点都是一棵“子树”,同样这个节点就是这棵“子树”的“根”。

浏览器怎么解析HTML

想到了什么了?没错,我们的家谱(只考虑父方)就是一棵“树”。
我们的磁盘目录结构也是一棵“树”,所以我们有“磁盘根目录”的说法。每个目录都是一个有子节点的节点,而文件就是叶节点。

那么我们的HTML文档树是怎么样的呢?

html元素就是这个文档的根节点。
html元素的子节点有且只有两个:head元素和body元素。

HTML的元素的父子关系是根据嵌套来区分的。
比如:

  1. <div><p><a><b></b></a></p><p><a></a></p><a></a></div>


两个p都是div的子元素,但是第一个a是第一个p的子元素,并且有一个子元素b,第二个a是第二个p的子元素,第三个a是div的子元素,和两个p是兄弟元素。

所以XHTML要求严格的嵌套,因为这是解析文档树的依据。
虽然没有良好的嵌套浏览器也不会报错,但是得到的结果可能并不是我们期望的,所以按照XHTML的格式来书写源代码是一个很好的习惯。

文档树解析出来之后,每个节点都是一个元素对象(比如a元素是Anchor对象,form是一个Form对象),对象又都有各自的属性和方法(我没说过吗?样式也是元素的属性),然后浏览器就把这些节点根据属性的取值显示出来,最后呈现在我们面前的就是一个网页了。

JavaScript操作的对象不是别的,正是DOM,所以我们可以用JS修改各个节点的属性,甚至添加、删除节点,从而表现出丰富多彩的效果。

如果你能理解这篇文章中所讲的内容,那么前面讲到的“后代选择器、直接子代选择器”这些应该是能很好地了解了。?

文章来源:

?? http://liaozj.blog.51cto.com/3618860/673389

?? http://blog.csdn.net/xiaojianpitt/article/details/6793158

?

热点排行