`
20386053
  • 浏览: 427956 次
文章分类
社区版块
存档分类
最新评论

DOCTYPE 与浏览器渲染模式分析

 
阅读更多

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. 字符串“<!DOCTYPE”
  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 是最佳选择:<!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">。

注:关于 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 由于这些内容而进入混杂模式。他可能会这么写:

  • <![if !IE]><!-- some comments --><![endif]>
  • <![if false]><!-- some comments --><![endif]>

又或者是

  • <!--[if !IE]>some text<![endif]-->

上面这些 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

转载自:
http://w3help.org/zh-cn/casestudies/002
分享到:
评论

相关推荐

    HTML !DOCTYPE 标签 声明HTML版本

    DOCTYPE&gt; 声明,这样浏览器才能获知文档类型。 HTML 4.01 与 HTML5 之间的差异 在 HTML 4.01 中有三种 &lt;!DOCTYPE&gt; 声明。在 HTML5 中只有一种: &lt;!DOCTYPE html&gt; HTML 元素和文档类型(Doctype) 提示和注释 ...

    Yeharold#Web#09-01.浏览器渲染机制1

    前言接下来的几篇文章,讲一下二面的内容。二面的内容:渲染机制JS 运行机制页面性能错误监控本文接下来讲渲染机制。渲染机制包括的内容:什么是DOCTYPE及作用浏

    html doctype 作用介绍

    不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析,所以Doctype是非常关键的,尤其是在 IE 系列浏览器中,由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。 两种渲染模式: BackCompat:...

    知名浏览器对DOCTYPE模式的选择机制

    本文包括的模式转换(mode switching)适用于Firefox和其他基于Gecko的浏览器,Safari、Chrome和其他基于Webkit的浏览器,Opera、 Konqueror、Mac版Internet Explorer、Windows版Internet Explorer和内嵌IE的浏览器...

    CrystalAngelLee#crystal-interview#Doctype 作用? 严格模式与混杂模式如何区分?它们有何

    ( HTML5 没有严格和混杂之分)区分DTD: Document Type Definition文档包含严格的 DOCTYPE:一般以严格模式呈现包含过渡 D

    HTML 元素与合法的 Doctype.docx

    HTML 元素与合法的 Doctype.docx

    HTML的!DOCTYPE是什么意思.zip_zip和rar区别

    HTML的!DOCTYPE是什么意思.zip

    HTML !DOCTYPE 标签.docx

    HTML !DOCTYPE 标签.docx

    html标题_DOCTYPE的含义

    html标题_DOCTYPE的含义 有关DOCTYPE标签的各种用法

    为什么使用DOCTYPE HTML

    你知道如果没有它,浏览器在渲染页面的时候会使用怪异模式;你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype: 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD ...

    DOCTYPE文档类型声明

    DOCTYPE文档类型声明..........

    DOCTYPE html PUBLIC.doc

    DOCTYPE html PUBLIC.doc

    浅谈浏览器兼容性模式[按F12便知]

    这一串东西就是告诉浏览器你要用何种模式来渲染页面,说白了就是让浏览器用何种标准的CSS进行页面布局。 有三种模式供你选择: 标准模式(Standards Mode) 准标准模式(Almost Standards Mode) 怪癖模式...

    网页 DOCTYPE html标签的作用1

    DOCTYPE&gt; 声明位于文档中的最前面的位置,处于 &lt;html&gt; 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。如果不写,可能会造

    全系IE支持Bootstrap的解决方法

    最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下...对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器

    !DOCTYPE声明对JavaScript的影响分析

    要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效;当然对JS的取值也会有影响。...接下来就看一下这三种类型对不同浏览器在

    doctype html

    meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt; ...

    js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 ...

    2018最新BAT 《前端必考面试》.docx

    严格模式与混杂模式如何区分?它们有何意义? (1)、 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。 (2)、严格模式的排版和 JS 运作模式是 以该浏览器支持...

Global site tag (gtag.js) - Google Analytics