浏览器如何解析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元素的子节点有且只有两个：head元素和body元素。

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

 

复制代码

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

这是一个四级的嵌套，div的子元素是p，p的子元素是a，a的子元素是b。
当然，同一级的元素就不用多说了吧

 

复制代码

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