搜索

首页 >web前端 >H5教程 >DOCTYPE与浏览器渲染介绍

DOCTYPE与浏览器渲染介绍

巴扎黑
巴扎黑原创
2017-08-09 15:44:101955浏览

DOCTYPE 的诞生

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

首先看看当一个 HTML 文档在没有 DOCTYPE 时，页面在各浏览器中会如何渲染及解析。我们尝试生成一个在最顶端没有 DOCTYPE 的 HTML 文档：

<html>
<head></head>
<body>
<script>
document.write(document.compatMode);
</script>
</body>
</html>

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

  • BackCompat：标准兼容模式（Standards-compliant mode）未开启；

  • CSS1Compat：标准兼容模式已开启。

其实这里所谓的标准兼容模式未开启即“混杂模式”（又叫怪异模式，Quirks mode），标准兼容模式已开启即“标准模式”（又叫严格模式，Standards mode 或者 Strict mode）。 所以前面那个测试样例中，没有书写 DOCTYPE 的 HTML 文档在所有浏览器中均会以混杂模式进行渲染和解析。

注：document.compatMode 在 MSDN 中的介绍：compatMode Property

究竟为何浏览器要制作这么一个“开关”。微软开发的 IE 系列浏览器中寿命最长的 IE6 伴随 Windows XP 诞生。相比上一个版本 IE5.5，IE6 确实有着许多重大的改进，其中对于页面渲染而言最大的变化就在于 IE6 支持了部分 CSS1 中的特性。例如，为一个块级元素设定宽度及高度时，不再作用于 border 外围，而是如 W3C 规范中所描述的仅仅是元素内容之上。这一点和 IE5.5 差别巨大。为了保证那些 90 年代后期的基于 IE6 之前版本开发的页面能够正常显示，即保证浏览器有向后兼容性，此“开关”诞生，微软试图通过对 DOCTYPE 的判断来决定浏览器采取何种模式工作，即是 IE6 还是 IE5.5 的问题。所以从 document.compatMode 返回的字符串值中也可以看出来，BackCompat 代表了向后兼容（即 IE5.5），CSS1Compat 代表了对 CSS1 规范的兼容（即 IE6）。由此，浏览器的工作模式被分为了混杂模式及标准模式。

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

注：IE6 增强的 CSS：CSS Enhancements in Internet Explorer 6

近似标准模式

近似标准模式（Almost Standards Mode）从字面意思上看与标准模式非常类似，但确实有小的差别。主要体现在对于表格单元格内垂直方向布局渲染差异。IE8 开始、Firefox、Chrome、Safari、Opera 7.5 开始，这些浏览器的标准模式更加严格的遵循了 CSS2.1 规范，故对于在目前看来不太“标准”的以前的标准模式，被赋予了“近似标准模式”的名字。但是在较早的 IE6 IE7 以及 Opera 7.5 之前版本中，浏览器无法严格遵循 CSS2.1 规范，故对于它们来说没有这个近似标准模式，也可以理解为它们的近似标准模式就是标准模式。

到目前为止，可以看到各浏览器主要包含了三种模式。在 HTML5 草案中，更加明确的规定了模式的定义：

传统名称 HTML5 草案名称 document.compatMode 返回值
standards mode 或者 strict mode no-quirks mode CSS1Compat
almost standards mode limited-quirks mode CSS1Compat
quirks mode quirks mode BackCompat

注：HTML5 草案关于 compatMode 的介绍：3.1.3 Resource metadata management

DOCTYPE 的选择

工作模式简介

浏览器的工作模式常被称为“渲染模式”。实际上浏览器不同的工作模式不仅对渲染有影响，对代码的解析以及脚本的行为也同样有影响。

从更广泛的角度来看，浏览器的工作模式的差异不仅体现在处理 HTML 页面的时候，处理 XML 及一些非 WEB 内容时也有模式上的差异，但本文仅讨论浏览器在处理 HTML 页面时工作模式。1

注：

  1. 关于浏览器的工作模式的更多信息，请参考 Activating Browser Modes with Doctype。

工作模式的来源及变迁

不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式，然而使用了 DOCTYPE，也不一定就能够使文档在所有浏览器中均处于标准模式。DOCTYPE 本身不就是一个“开关”吗？为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式？这个和以下条件有关：

  • 使用了本身就会使浏览器进入混杂模式的古老的甚至是错误的 DOCTYPE；

  • 在 DOCTYPE 之前出现了其他内容，如注释，甚至是 HTML 标签。

我们先说第一个条件。HTML 历史悠久，仅正确的 HTML 类型的 DOCTYPE 就有很多种。先看一个标准的 DOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

上面的 DOCTYPE 包含 6 部分：

  1. 字符串“

  2. 根元素通用标识符“HTML”

  3. 字符串“PUBLIC”

  4. 被引号括起来的公共标识符（publicId）“-//W3C//DTD HTML 4.01//EN”

  5. 被引号括起来的系统标识符（systemId）“http://www.w3.org/TR/html4/strict.dtd”

  6. 字符串“>”

其中根元素通用标识符、公共标识符、系统标识符均可以通过脚本调用 DOM 接口获得，分别对应 document.doctype.name、document.doctype.publicId、document.doctype.systemId（IE6 IE7 不支持）。

不同的 DOCTYPE 之间，上面三部分可能不尽相同，有些 DOCTYPE 确实其中某部分，如何在这些纷繁的 DOCTYPE 中选择？

其实浏览器在嗅探 DOCTYPE 时只考虑了上述 6 部分中的第 1、2、4、6 部分，且不区分大小写。在各浏览器内核实现中，几乎都存在一个名单用于记录这些常见的 DOCTYPE 所对应的模式，例如 WebKit 内核中 DocTypeStrings.gperf 文件。各浏览器名单列表中触发模式的不同导致了某些 DOCTYPE 出现在不同浏览器中触发了不同模式的现象，如 。而对于名单之外的 DOCTYPE，浏览器之间处理的差异也会导致触发不同的模式，比如可能有的浏览器会将名单之外的 DOCTYPE 当作混杂模式，而有的却会一律当作标准模式。

所以我们在选用 DOCTYPE 的时候首先确定的是我们想让 HTML 文档使用标准模式。

如果力求最简，则 HTML5 的 DOCTYPE 是最佳选择：，所有的主流浏览器均将这种只包含第 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 的完全一致。

有时候我们处于特殊情况也希望浏览器能够都处于近似标准模式，则可选择：。

注：关于 Firefox 中 DTD 与浏览器工作模式：Mozilla's DOCTYPE sniffing

DOCTYPE 之前不能出现的内容

前面提到，DOCTYPE 作为一个决定浏览器对于 HTML 文档采取何种模式“开关”，应出现在 HTML 文档的最前面。但有时候处于某些原因，有的作者会在 DOCTYPE 之前防止一些内容，可能是服务端输出的某些信息。这样会让浏览器感到极为“困惑”，它第一眼看到的不是 DOCTYPE，故可能会认为页面没有 DOCTYPE，则可能触发了混杂模式。然而事实上在这一点各浏览器的处理并不相同。我们将 DOCTYPE 之前可能出现的这些内容分类，它们包括：

  • 普通文本

  • HTML 标签

  • HTML 注释

  • XML 声明

  • IE 条件注释

对于普通文本和 HTML 标签，各浏览器均进入了混杂模式，这个很好理解，都看到疑似的 HTML 文档正文了，浏览器不太会往下追查 DOCTYPE 在哪里。

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

有的作者很聪明，他既在 DOCTYPE 之前加入了他需要的内容，却又没有使 IE 由于这些内容而进入混杂模式。他可能会这么写：

又或者是

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

注：关于 IE 条件注释：About Conditional Comments

建议

通过上面的历史回顾以及分析，我们看到了 DOCTYPE 对于目前主流浏览器的关键作用，同时也发掘了能够触发各浏览器标准模式的最佳 DOCTYPE。标准模式会使不同浏览器之间发生兼容性问题的风险降至最低，选择正确的 DOCTYPE 以及保证 DOCTYPE 在 HTML 文档中绝对开头的位置则是使 DOCTYPE 发挥其正确作用的关键。

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
IE9
Firefox 4.0.1
Chrome 12.0.742.100
Safari 5.0.5
Opera 11.11
测试页面:  
本文更新时间: 2011-06-17

关键字

浏览器 兼容性 渲染模式 标准模式 混杂模式 DOCTYPE DTD

以上是DOCTYPE与浏览器渲染介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：总结phonegap常用时间操作下一篇：HTML5讲解之可拖动dragable属性和其他成员

相关文章

查看更多