溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

關(guān)于DOCTYPE與瀏覽器渲染的相關(guān)介紹

發(fā)布時間：2020-04-25 16:45:53 來源：億速云 閱讀：513 作者：栢白 欄目：web開發(fā)

DOCTYPE 的誕生

DOCTYPE，或者稱為 Document Type Declaration（文檔類型聲明，縮寫 DTD）。通常情況下，DOCTYPE 位于一個 HTML 文檔的最前面的位置，位于根元素 HTML 的起始標(biāo)簽之前。因?yàn)闉g覽器必須在解析 HTML 文檔正文之前就確定當(dāng)前文檔的類型，以決定其需要采用的渲染模式，不同的渲染模式會影響到瀏覽器對于 CSS 代碼甚至 JavaScript 腳本的解析。尤其是在 IE 系列瀏覽器中，由 DOCTYPE 所決定的 HTML 頁面的渲染模式至關(guān)重要。

首先看看當(dāng)一個 HTML 文檔在沒有 DOCTYPE 時，頁面在各瀏覽器中會如何渲染及解析。我們嘗試生成一個在最頂端沒有 DOCTYPE 的 HTML 文檔：

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

這個頁面在所有的瀏覽器中均返回一致的結(jié)果，頁面上打印出了“BackCompat”。 document.compatMode 屬性最初由微軟在 IE 中創(chuàng)造出來，這是一個只讀的屬性，返回一個字符串，只可能存在兩種返回值：

  • BackCompat：標(biāo)準(zhǔn)兼容模式（Standards-compliant mode）未開啟；

  • CSS1Compat：標(biāo)準(zhǔn)兼容模式已開啟。

其實(shí)這里所謂的標(biāo)準(zhǔn)兼容模式未開啟即“混雜模式”（又叫怪異模式，Quirks mode），標(biāo)準(zhǔn)兼容模式已開啟即“標(biāo)準(zhǔn)模式”（又叫嚴(yán)格模式，Standards mode 或者 Strict mode）。 所以前面那個測試樣例中，沒有書寫 DOCTYPE 的 HTML 文檔在所有瀏覽器中均會以混雜模式進(jìn)行渲染和解析。

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

究竟為何瀏覽器要制作這么一個“開關(guān)”。微軟開發(fā)的 IE 系列瀏覽器中壽命最長的 IE6 伴隨 Windows XP 誕生。相比上一個版本 IE5.5，IE6 確實(shí)有著許多重大的改進(jìn)，其中對于頁面渲染而言最大的變化就在于 IE6 支持了部分 CSS1 中的特性。例如，為一個塊級元素設(shè)定寬度及高度時，不再作用于 border 外圍，而是如 W3C 規(guī)范中所描述的僅僅是元素內(nèi)容之上。這一點(diǎn)和 IE5.5 差別巨大。為了保證那些 90 年代后期的基于 IE6 之前版本開發(fā)的頁面能夠正常顯示，即保證瀏覽器有向后兼容性，此“開關(guān)”誕生，微軟試圖通過對 DOCTYPE 的判斷來決定瀏覽器采取何種模式工作，即是 IE6 還是 IE5.5 的問題。所以從 document.compatMode 返回的字符串值中也可以看出來，BackCompat 代表了向后兼容（即 IE5.5），CSS1Compat 代表了對 CSS1 規(guī)范的兼容（即 IE6）。由此，瀏覽器的工作模式被分為了混雜模式及標(biāo)準(zhǔn)模式。

值得注意的是，IE 的版本號一路從 6.0 升至了目前的 9.0，但升級僅限于標(biāo)準(zhǔn)模式。對于混雜模式，IE 的版本號永久的凍結(jié)在 5.5，這也算是為了向后兼容的巨大犧牲。也就是說即使我們使用著最新最高級的 IE9，但若我們不書寫 DOCTYPE 或者使用了能夠觸發(fā)混雜模式的 DOCTYPE，那我們所面對的瀏覽器仍相當(dāng)于是那個十幾年前的老古董 IE5.5。而其他那些瀏覽器的混雜模式和標(biāo)準(zhǔn)模式之間卻沒有想 IE 中這么大的差別。

注：IE6 增強(qiáng)的 CSS：CSS Enhancements in Internet Explorer 6

近似標(biāo)準(zhǔn)模式

近似標(biāo)準(zhǔn)模式（Almost Standards Mode）從字面意思上看與標(biāo)準(zhǔn)模式非常類似，但確實(shí)有小的差別。主要體現(xiàn)在對于表格單元格內(nèi)垂直方向布局渲染差異。IE8 開始、Firefox、Chrome、Safari、Opera 7.5 開始，這些瀏覽器的標(biāo)準(zhǔn)模式更加嚴(yán)格的遵循了 CSS2.1 規(guī)范，故對于在目前看來不太“標(biāo)準(zhǔn)”的以前的標(biāo)準(zhǔn)模式，被賦予了“近似標(biāo)準(zhǔn)模式”的名字。但是在較早的 IE6 IE7 以及 Opera 7.5 之前版本中，瀏覽器無法嚴(yán)格遵循 CSS2.1 規(guī)范，故對于它們來說沒有這個近似標(biāo)準(zhǔn)模式，也可以理解為它們的近似標(biāo)準(zhǔn)模式就是標(biāo)準(zhǔn)模式。

到目前為止，可以看到各瀏覽器主要包含了三種模式。在 HTML5 草案中，更加明確的規(guī)定了模式的定義：

傳統(tǒng)名稱HTML5 草案名稱document.compatMode 返回值
standards mode 或者 strict modeno-quirks modeCSS1Compat
almost standards modelimited-quirks modeCSS1Compat
quirks modequirks modeBackCompat

注：HTML5 草案關(guān)于 compatMode 的介紹：3.1.3 Resource metadata management

DOCTYPE 的選擇

工作模式簡介

瀏覽器的工作模式常被稱為“渲染模式”。實(shí)際上瀏覽器不同的工作模式不僅對渲染有影響，對代碼的解析以及腳本的行為也同樣有影響。

從更廣泛的角度來看，瀏覽器的工作模式的差異不僅體現(xiàn)在處理 HTML 頁面的時候，處理 XML 及一些非 WEB 內(nèi)容時也有模式上的差異，但本文僅討論瀏覽器在處理 HTML 頁面時工作模式。1

注：

  1. 關(guān)于瀏覽器的工作模式的更多信息，請參考 Activating Browser Modes with Doctype。

工作模式的來源及變遷

不使用 DOCTYPE 一定會使 HTML 文檔處于混雜模式，然而使用了 DOCTYPE，也不一定就能夠使文檔在所有瀏覽器中均處于標(biāo)準(zhǔn)模式。DOCTYPE 本身不就是一個“開關(guān)”嗎？為何在有 DOCTYPE 的 HTML 文檔之上仍然還會出現(xiàn)混雜模式？這個和以下條件有關(guān)：

  • 使用了本身就會使瀏覽器進(jìn)入混雜模式的古老的甚至是錯誤的 DOCTYPE；

  • 在 DOCTYPE 之前出現(xiàn)了其他內(nèi)容，如注釋，甚至是 HTML 標(biāo)簽。

我們先說第一個條件。HTML 歷史悠久，僅正確的 HTML 類型的 DOCTYPE 就有很多種。先看一個標(biāo)準(zhǔn)的 DOCTYPE：

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

上面的 DOCTYPE 包含 6 部分：

  1. 字符串“<!DOCTYPE”

  2. 根元素通用標(biāo)識符“HTML”

  3. 字符串“PUBLIC”

  4. 被引號括起來的公共標(biāo)識符（publicId）“-//W3C//DTD HTML 4.01//EN”

  5. 被引號括起來的系統(tǒng)標(biāo)識符（systemId）“http://www.w3.org/TR/html4/strict.dtd”

  6. 字符串“>”

其中根元素通用標(biāo)識符、公共標(biāo)識符、系統(tǒng)標(biāo)識符均可以通過腳本調(diào)用 DOM 接口獲得，分別對應(yīng) document.doctype.name、document.doctype.publicId、document.doctype.systemId（IE6 IE7 不支持）。

不同的 DOCTYPE 之間，上面三部分可能不盡相同，有些 DOCTYPE 確實(shí)其中某部分，如何在這些紛繁的 DOCTYPE 中選擇？

其實(shí)瀏覽器在嗅探 DOCTYPE 時只考慮了上述 6 部分中的第 1、2、4、6 部分，且不區(qū)分大小寫。在各瀏覽器內(nèi)核實(shí)現(xiàn)中，幾乎都存在一個名單用于記錄這些常見的 DOCTYPE 所對應(yīng)的模式，例如 WebKit 內(nèi)核中 DocTypeStrings.gperf 文件。各瀏覽器名單列表中觸發(fā)模式的不同導(dǎo)致了某些 DOCTYPE 出現(xiàn)在不同瀏覽器中觸發(fā)了不同模式的現(xiàn)象，如 。而對于名單之外的 DOCTYPE，瀏覽器之間處理的差異也會導(dǎo)致觸發(fā)不同的模式，比如可能有的瀏覽器會將名單之外的 DOCTYPE 當(dāng)作混雜模式，而有的卻會一律當(dāng)作標(biāo)準(zhǔn)模式。

所以我們在選用 DOCTYPE 的時候首先確定的是我們想讓 HTML 文檔使用標(biāo)準(zhǔn)模式。

如果力求最簡，則 HTML5 的 DOCTYPE 是最佳選擇：<!DOCTYPE html>，所有的主流瀏覽器均將這種只包含第 1、2、6 部分的最短的 DOCTYPE 視為標(biāo)準(zhǔn)模式。

如果力求穩(wěn)妥，則較早的 HTML4.01 Strict 的 DOCTYPE 也是一種好的選擇：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">，它在各主流瀏覽器中觸發(fā)的模式與上面的 HTML5 的完全一致。

有時候我們處于特殊情況也希望瀏覽器能夠都處于近似標(biāo)準(zhǔn)模式，則可選擇：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。

注：關(guān)于 Firefox 中 DTD 與瀏覽器工作模式：Mozilla's DOCTYPE sniffing

DOCTYPE 之前不能出現(xiàn)的內(nèi)容

前面提到，DOCTYPE 作為一個決定瀏覽器對于 HTML 文檔采取何種模式“開關(guān)”，應(yīng)出現(xiàn)在 HTML 文檔的最前面。但有時候處于某些原因，有的作者會在 DOCTYPE 之前防止一些內(nèi)容，可能是服務(wù)端輸出的某些信息。這樣會讓瀏覽器感到極為“困惑”，它第一眼看到的不是 DOCTYPE，故可能會認(rèn)為頁面沒有 DOCTYPE，則可能觸發(fā)了混雜模式。然而事實(shí)上在這一點(diǎn)各瀏覽器的處理并不相同。我們將 DOCTYPE 之前可能出現(xiàn)的這些內(nèi)容分類，它們包括：

  • 普通文本

  • HTML 標(biāo)簽

  • HTML 注釋

  • XML 聲明

  • IE 條件注釋

對于普通文本和 HTML 標(biāo)簽，各瀏覽器均進(jìn)入了混雜模式，這個很好理解，都看到疑似的 HTML 文檔正文了，瀏覽器不太會往下追查 DOCTYPE 在哪里。

對于 HTML 注釋和 XML 聲明，它們和上面的普通文本和 HTML 標(biāo)簽有些差別，它們不會在頁面中展示出來，即不可視。這時，有的瀏覽器則顯得十分“智能”，非 IE 瀏覽器均會忽略它們的存在，DOCTYPE 被正確解析。但是在 IE6 中，DOCTYPE 之前的 XML 聲明會導(dǎo)致頁面進(jìn)入混雜模式，而所有的 IE 均會使 DOCTYPE 之前出現(xiàn)了 HTML 注釋的頁面進(jìn)入混雜模式。在 IE9 中當(dāng)出現(xiàn)這種情況時，瀏覽器在控制臺中給出了提示：“HTML1113: 文檔模式從 IE9 標(biāo)準(zhǔn) 重新啟動到 Quirks ”，看來微軟在這一點(diǎn)上不打算“隨大流”，這樣做也可以敦促作者盡量避免在 DOCTYPE 之前加入其他內(nèi)容。

有的作者很聰明，他既在 DOCTYPE 之前加入了他需要的內(nèi)容，卻又沒有使 IE 由于這些內(nèi)容而進(jìn)入混雜模式。他可能會這么寫：

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

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

又或者是

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

上面這些 IE 條件注釋在非 IE 瀏覽器中，可能完全被忽略，可能被解釋為普通 HTML 注釋。但是在 IE 中它們?nèi)肯Я?，因?yàn)檫@就是 IE 條件注釋的作用。所以這也是目前比較合適的在 DOCTYPE 之前寫點(diǎn)什么又保證所有瀏覽器均為標(biāo)準(zhǔn)模式的做法，但我們?nèi)匀徊煌扑]在 DOCTYPE 之前加入任何非空白內(nèi)容。

注：關(guān)于 IE 條件注釋：About Conditional Comments

建議

通過上面的歷史回顧以及分析，我們看到了 DOCTYPE 對于目前主流瀏覽器的關(guān)鍵作用，同時也發(fā)掘了能夠觸發(fā)各瀏覽器標(biāo)準(zhǔn)模式的最佳 DOCTYPE。標(biāo)準(zhǔn)模式會使不同瀏覽器之間發(fā)生兼容性問題的風(fēng)險降至最低，選擇正確的 DOCTYPE 以及保證 DOCTYPE 在 HTML 文檔中絕對開頭的位置則是使 DOCTYPE 發(fā)揮其正確作用的關(guān)鍵。

測試環(huán)境

操作系統(tǒng)版本: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

關(guān)鍵字

瀏覽器 兼容性 渲染模式 標(biāo)準(zhǔn)模式 混雜模式 DOCTYPE DTD

以上就是關(guān)于DOCTYPE與瀏覽器渲染的相關(guān)介紹的詳細(xì)內(nèi)容，更多請關(guān)注億速云其它相關(guān)文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手