Heim > Artikel > Web-Frontend > Einführung in DOCTYPE und Browser-Rendering

Einführung in DOCTYPE und Browser-Rendering

巴扎黑Original: 2017-08-09 15:44:101910Durchsuche

Die Geburt von DOCTYPE

DOCTYPE, auch bekannt als Document Type Declaration (Document Type Declaration, Abkürzung DTD). Normalerweise steht DOCTYPE ganz am Anfang eines HTML-Dokuments, vor dem öffnenden Tag des Root-HTML-Elements. Da der Browser den Typ des aktuellen Dokuments bestimmen muss, bevor er den Textkörper des HTML-Dokuments analysiert, um den Rendering-Modus zu bestimmen, den er übernehmen muss. Verschiedene Rendering-Modi wirken sich auf das Parsen von CSS-Code und sogar JavaScript-Skripten durch den Browser aus. Insbesondere in den Browsern der IE-Serie ist der durch DOCTYPE bestimmte Rendering-Modus der HTML-Seite entscheidend.

Schauen wir uns zunächst an, wie die Seite in jedem Browser gerendert und analysiert wird, wenn ein HTML-Dokument keinen DOCTYPE hat. Wir versuchen, ein HTML-Dokument ohne DOCTYPE am Anfang zu generieren:

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

Diese Seite liefert in allen Browsern konsistente Ergebnisse, wobei „BackCompat“ auf der Seite aufgedruckt ist. Die document.compatMode-Eigenschaft wurde ursprünglich von Microsoft im IE erstellt. Dies ist eine schreibgeschützte Eigenschaft, die eine Zeichenfolge zurückgibt. Es gibt nur zwei mögliche Rückgabewerte:

BackCompat: Standards-kompatibler Modus (Standardkonformer Modus) ist nicht aktiviert;
CSS1Compat: Standardkonformer Modus ist aktiviert.

Tatsächlich ist hier der sogenannte Standardkompatibilitätsmodus, der „Promiscuous-Modus“ (auch Quirks-Modus genannt), nicht aktiviert, und der Standardkompatibilitätsmodus ist aktiviert. Dies ist der „Standardmodus“ (auch Strict Mode genannt), Standardmodus oder Strict Mode. Daher wird im vorherigen Testbeispiel das HTML-Dokument ohne DOCTYPE in allen Browsern im gemischten Modus gerendert und analysiert.

Hinweis: document.compatMode wird in MSDN eingeführt: compatMode-Eigenschaft

Warum nehmen Browser einen solchen „Wechsel“ vor? IE6, der langlebigste unter den von Microsoft entwickelten Browsern der IE-Serie, wurde mit Windows XP geboren. Im Vergleich zur Vorgängerversion IE5.5 weist IE6 viele wesentliche Verbesserungen auf. Die größte Änderung beim Seitenrendering besteht darin, dass IE6 einige Funktionen in CSS1 unterstützt. Wenn Sie beispielsweise die Breite und Höhe eines Elements auf Blockebene festlegen, wirkt sich dies nicht mehr auf die Randperipherie aus, sondern nur auf den Elementinhalt, wie in der W3C-Spezifikation beschrieben. Dies unterscheidet sich stark von IE5.5. Um sicherzustellen, dass die in den späten 1990er Jahren auf der Grundlage von Versionen vor IE6 entwickelten Seiten normal angezeigt werden können, dh um sicherzustellen, dass der Browser abwärtskompatibel ist, hat Microsoft versucht, dies zu tun DOCTYPE wird verwendet, um zu bestimmen, in welchem Modus der Browser arbeiten soll, also ob es sich um IE6 oder IE5.5 handelt. Aus dem von document.compatMode zurückgegebenen Zeichenfolgenwert ist also auch ersichtlich, dass BackCompat die Abwärtskompatibilität (dh IE5.5) und CSS1Compat die Kompatibilität mit der CSS1-Spezifikation (dh IE6) darstellt. Dadurch wird der Arbeitsmodus des Browsers in gemischten Modus und Standardmodus unterteilt.

Es ist erwähnenswert, dass die Versionsnummer des IE von 6.0 auf die aktuelle 9.0 aktualisiert wurde, das Upgrade jedoch nur im Standardmodus erfolgt. Im gemischten Modus ist die Versionsnummer des IE dauerhaft auf 5.5 eingefroren, was ebenfalls einen großen Einbußen für die Abwärtskompatibilität darstellt. Mit anderen Worten: Selbst wenn wir den neuesten und fortschrittlichsten IE9 verwenden und keinen DOCTYPE schreiben oder einen DOCTYPE verwenden, der den gemischten Modus auslösen kann, entspricht der Browser, mit dem wir es zu tun haben, immer noch dem antiken IE5.5 von mehr als Vor zehn Jahren. Es gibt keinen so großen Unterschied zwischen dem gemischten Modus und dem Standardmodus anderer Browser wie im IE.

Hinweis: IE6-erweitertes CSS: CSS-Verbesserungen in Internet Explorer 6

Angenäherter Standardmodus

Der Fast-Standardmodus ist buchstäblich derselbe wie der Standardmodus. Sehr ähnlich, hat aber kleine Unterschiede. Dies spiegelt sich hauptsächlich in der unterschiedlichen Darstellung des vertikalen Layouts innerhalb von Tabellenzellen wider. Ab IE8, Firefox, Chrome, Safari und Opera 7.5 folgt der Standardmodus dieser Browser strenger der CSS2.1-Spezifikation, sodass der bisherige Standardmodus, der derzeit nicht als „Standard“ zu gelten scheint, mit „ „Annähernd „Standardmodus““-Name. In den früheren Versionen von IE6, IE7 und Opera vor 7.5 konnten Browser jedoch nicht strikt der CSS2.1-Spezifikation folgen, sodass es für sie keinen ungefähren Standardmodus gab. Es kann auch verstanden werden, dass ihr ungefährer Standardmodus der Standardmodus ist .

Bisher können Sie sehen, dass jeder Browser hauptsächlich drei Modi enthält. Im HTML5-Entwurf ist die Definition von Mustern klarer definiert:

传统名称	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 页面时工作模式。¹

注：

关于浏览器的工作模式的更多信息，请参考 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 部分：

字符串“
根元素通用标识符“HTML”
字符串“PUBLIC”
被引号括起来的公共标识符（publicId）“-//W3C//DTD HTML 4.01//EN”
被引号括起来的系统标识符（systemId）“http://www.w3.org/TR/html4/strict.dtd”
字符串“>”

Der universelle Bezeichner des Stammelements, der öffentliche Bezeichner und der Systembezeichner können durch Aufrufen der DOM-Schnittstelle über Skripte abgerufen werden, die document.doctype.name, document.doctype.publicId und document.doctype entsprechen bzw. systemId (nicht unterstützt von IE6 IE7).

Die oben genannten drei Teile können zwischen verschiedenen DOCTYPEs unterschiedlich sein. Einige DOCTYPEs haben bestimmte Teile davon.

Tatsächlich berücksichtigt der Browser beim Sniffing von DOCTYPE nur die Teile 1, 2, 4 und 6 der oben genannten 6 Teile und unterscheidet nicht zwischen Groß- und Kleinschreibung. In jeder Browser-Kernel-Implementierung gibt es fast immer eine Liste zum Aufzeichnen der Muster, die diesen allgemeinen DOCTYPEs entsprechen, beispielsweise die Datei DocTypeStrings.gperf im WebKit-Kernel. Der Unterschied in den Auslösemodi in der Liste der einzelnen Browser führt dazu, dass einige DOCTYPEs in verschiedenen Browsern unterschiedliche Modi auslösen, z. B. . Für DOCTYPEs außerhalb der Liste lösen Unterschiede in der Verarbeitung zwischen Browsern auch unterschiedliche Modi aus. Beispielsweise behandeln einige Browser DOCTYPEs außerhalb der Liste als gemischten Modus, während andere sie als Standardmodell behandeln.

Wenn wir uns also für DOCTYPE entscheiden, stellen wir zunächst sicher, dass das HTML-Dokument den Standardmodus verwenden soll.

Wenn Sie nach Einfachheit streben, ist der DOCTYPE von HTML5 die beste Wahl: . Alle gängigen Browser verwenden diese kürzeste DOCTYPE-Ansicht, die nur die Teile 1, 2 und 6 enthält Standardmodus.

Wenn Sie Stabilität anstreben, ist auch der frühere DOCTYPE von HTML4.01 Strict eine gute Wahl: , der Modus, den es in allen gängigen Browsern auslöst, ist genau der gleiche wie der obige HTML5.

Manchmal befinden wir uns in besonderen Situationen und möchten, dass sich der Browser in einem nahezu standardmäßigen Modus befindet. Dann können Sie Folgendes auswählen: .

Hinweis: Bezüglich DTD und Browser-Arbeitsmodi in Firefox: Mozillas DOCTYPE-Sniffing

Inhalte, die nicht vor DOCTYPE erscheinen können

Wie bereits erwähnt, dient DOCTYPE als Entscheidungsträger für Browser Welcher Modus-„Schalter“ das HTML-Dokument annimmt, sollte am Anfang des HTML-Dokuments erscheinen. Aber manchmal verhindern einige Autoren aus bestimmten Gründen einige Inhalte vor DOCTYPE, bei denen es sich möglicherweise um einige vom Server ausgegebene Informationen handelt. Dadurch wird der Browser extrem „verwirrt“. Das erste, was er sieht, ist kein DOCTYPE, sodass er möglicherweise denkt, dass die Seite keinen DOCTYPE hat, und der gemischte Modus ausgelöst wird. Tatsächlich handhabt jeder Browser dies jedoch anders. Wir klassifizieren den Inhalt, der vor DOCTYPE erscheinen kann. Dazu gehören:

Normaler Text
HTML-Tag
HTML-Kommentare
XML-Deklaration
IE-bedingter Kommentar

Bei normalen Text- und HTML-Tags wechseln alle Browser in den gemischten Modus aktiviert ist, was leicht zu verstehen ist. Sie können den verdächtigen HTML-Dokumenttext sehen und der Browser wird wahrscheinlich nicht herausfinden, wo sich der DOCTYPE befindet.

Bei HTML-Kommentaren und XML-Deklarationen unterscheiden sie sich etwas von den oben genannten normalen Text- und HTML-Tags. Sie werden nicht auf der Seite angezeigt, das heißt, sie sind nicht sichtbar. Derzeit scheinen einige Browser sehr „intelligent“ zu sein, und Nicht-IE-Browser ignorieren ihre Existenz und DOCTYPE wird korrekt analysiert. Allerdings führen in IE6 XML-Deklarationen vor DOCTYPE dazu, dass die Seite in den Promiscuous-Modus wechselt, und alle IE bewirken, dass Seiten mit HTML-Kommentaren vor DOCTYPE in den Promiscuous-Modus wechseln. Wenn dies in IE9 passiert, gibt der Browser in der Konsole eine Meldung aus: „HTML1113: Dokumentmodus von IE9 Standard auf Quirks neu gestartet.“ “, es scheint, dass Microsoft derzeit nicht die Absicht hat, „dem Trend zu folgen“. Dies kann Autoren dazu drängen, zu vermeiden, vor DOCTYPE andere Inhalte hinzuzufügen vor DOCTYPE. Er könnte schreiben:

Hinweis: Über IE-bedingte Kommentare

Empfehlungen

Durch die obige historische Überprüfung und Analyse haben wir die Schlüsselrolle von DOCTYPE in den aktuellen Mainstream-Browsern erkannt. Gleichzeitig haben wir auch den besten DOCTYPE entdeckt, der den Standardmodus jedes Browsers minimieren kann Risiko von Kompatibilitätsproblemen zwischen verschiedenen Browsern. Wählen Sie den richtigen DOCTYPE aus und stellen Sie sicher, dass sich der DOCTYPE am absoluten Anfang des HTML-Dokuments befindet. Dies ist der Schlüssel dafür, dass DOCTYPE seine richtige Rolle spielt

Testumgebung

操作系统版本:	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

Schlüsselwörter

Browserkompatibilität Rendering-Modus Standardmodus Gemischter Modus DOCTYPE DTD

Das obige ist der detaillierte Inhalt vonEinführung in DOCTYPE und Browser-Rendering. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fassen Sie die üblichen Zeitoperationen von Phonegap zusammenNächster Artikel：Fassen Sie die üblichen Zeitoperationen von Phonegap zusammen

In Verbindung stehende Artikel

Mehr sehen