浏览器解析模式

Posted 2020-09-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器解析模式相关的知识，希望对你有一定的参考价值。

DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。通常情况下，DOCTYPE 位于一个 html 文档的最前面的位置，根元素 html 的起始标签之前,前面没有任何内容，不区分大小写。因为浏览器必须在解析 HTML 文档正文之前就确定当前文档的类型，以决定其需要采用的渲染模式。不同的渲染模式会影响到浏览器对于 CSS 代码甚至 javascript 脚本的解析。尤其是在 IE 系列浏览器中，由 DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。

公共 DTD，名称格式为：注册//组织//类型标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是 DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可声明三种 DTD 类型。分别表示严格版本，过渡版本，以及基于框架的 HTML 文档。

当一个 HTML 文档在没有 DOCTYPE 时

```

CSS1CompatCSS1Compat

``` 这个页面在所有的浏览器中均返回一致的结果，页面上打印出了“BackCompat”。 document.compatMode 属性最初由微软在 IE 中创造出来，这是一个只读的属性，返回一个字符串，只可能存在两种返回值：

BackCompat：标准兼容模式未开启；(混杂模式、怪异模式)
CSS1Compat：标准兼容模式已开启。(标注模式、严格模式)

值得注意的是，IE 的版本号一路从 6.0 升级，但升级仅限于标准模式。对于混杂模式，IE 的版本号永久的冻结在 5.5，这也算是为了向后兼容的巨大牺牲。也就是说即使我们使用着最新最高级的 IE9，但若我们不书写 DOCTYPE 或者使用了能够触发混杂模式的 DOCTYPE，那我们所面对的浏览器仍相当于是那个十几年前的老古董 IE5.5。而其他那些浏览器的混杂模式和标准模式之间却没有想 IE 中这么大的差别。

在 html 中，docutype 有两个主要目的：

对文档进行有效性验证。它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。
决定浏览器的呈现模式。对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。

混杂模式与标准模式

不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式，然而使用了 DOCTYPE，也不一定就能够使文档在所有浏览器中均处于标准模式。这个和以下2个条件有关：

使用了本身就会使浏览器进入混杂模式的古老的甚至是错误的 DOCTYPE；
- 正确的 HTML 类型的 DOCTYPE 有很多种。先看一个标准的 DOCTYPE：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 这个DOCTYPE 包含 6 部分： 1. 字符串“<!DOCTYPE” 2. 根元素通用标识符“HTML” 3. 字符串“PUBLIC” 4. 被引号括起来的公共标识符（publicId）“-//W3C//DTD HTML 4.01//EN” 5. 被引号括起来的系统标识符（systemId）“http://www.w3.org/TR/html4/strict.dtd” 6. 字符串“>”

``` 其实浏览器在嗅探 DOCTYPE 时只考虑了上述 6 部分中的第 1、2、4、6 部分，且不区分大小写。如果力求最简，则 HTML5 的 DOCTYPE 是最佳选择：<!DOCTYPE html>，所有的主流浏览器均将这种只包含第 1、2、6 部分的最短的 DOCTYPE 视为标准模式。

如果力求稳妥，则较早的 HTML4.01 Strict 的 DOCTYPE 也是一种好的选择：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">，它在各主流浏览器中触发的模式与上面的 HTML5 的完全一致。

有时候我们处于特殊情况也希望浏览器能够都处于准标准模式，则可选择：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。 ```
在 DOCTYPE 之前出现了其他内容，如注释，甚至是 HTML 标签

DOCTYPE 之前不能出现的内容

对于普通文本和 HTML 标签，各浏览器均进入了混杂模式，都看到疑似的 HTML 文档正文了，浏览器不太会往下追查 DOCTYPE 在哪里。
对于 HTML 注释和 XML 声明，它们跟上面的普通文本和 HTML 标签有些差别，它们不会在页面中展示出来，即不可视。而有的浏览器则显得十分“智能”，非 IE 浏览器均会忽略它们的存在，DOCTYPE 被正确解析。但是在 IE6 中，DOCTYPE 之前的 XML 声明会导致页面进入混杂模式，而所有的 IE 均会使 DOCTYPE 之前出现了 HTML 注释的页面进入混杂模式。在 IE9 中当出现这种情况时，浏览器在控制台中给出了提示：“HTML1113: 文档模式从 IE9 标准重新启动到 Quirks ”，看来微软在这一点上不打算“随大流”，这样做也可以敦促作者尽量避免在 DOCTYPE 之前加入其他内容。
有的前端工程师很聪明，他既在 DOCTYPE 之前加入了他需要的内容，却又没有使 IE 由于这些内容而进入混杂模式。他可能会这么写：

``` <![if !IE]><![endif]> <![if false]><![endif]> 又或者是

``` 上面这些 IE 条件注释在非 IE 浏览器中，可能完全被忽略，可能被解释为普通 HTML 注释。但是在 IE 中它们全部消失了，因为这就是 IE 条件注释的作用。所以这也是目前比较合适的在 DOCTYPE 之前写点什么又保证所有浏览器均为标准模式的做法，但我们仍然不推荐在 DOCTYPE 之前加入任何非空白内容。

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。 W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了怪异模式（Quircks mode）和标准模式（Standars mode），两种渲染方法共存在一个浏览器上。

火狐一直工作在标准模式下，但IE（6，7，8）标准模式与怪异模式差别很大，主要体现在对盒子模型的解释上，这个很重要，下面就重点说这个。那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：

浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考。
对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用严格（strict mode）解析。
在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version=”1.0″ encoding=”iso-8859-1″?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。如何设置为怪异模式：

方法一：在页面项部加 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
方法二：什么也不加。

如何设置为标准模式：

加入以下任意一种：HTML4提供了三种DOCTYPE可选择：
1. 
2. 
3. 
4. XHTML1.0提供了三种DOCTYPE可选择：
* 过渡型（Transitional ）

* 严格型（Strict ）

* 框架型（Frameset ）

如何判定现在是标准模式还是怪异模式：

方法一：执行以下代码
alert(window.top.document.compatMode) ;
//BackCompat  表示怪异模式
//CSS1Compat  表示标准模式

方法二：jquery为我们提供的方法，如下：
alert($.boxModel)
alert($.support.boxModel)

以上是关于浏览器解析模式的主要内容，如果未能解决你的问题，请参考以下文章