DOCTYPE 및 브라우저 렌더링 소개-H5 튜토리얼-php.cn

Document Type Declaration(Document Type Declaration, 약어 DTD)이라고도 알려진 DOCTYPE

DOCTYPE의 탄생. 일반적으로 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 속성은 원래 문자열을 반환하는 읽기 전용 속성입니다.

BackCompat: 표준 준수 모드를 사용할 수 없습니다.
CSS1Compat: 표준 호환성 모드가 켜져 있습니다.

실제로 여기서는 소위 표준 호환성 모드가 켜져 있지 않은데, 이는 "무차별 모드"(쿼크 모드라고도 함)이고, 표준 호환성 모드는 "표준 모드"(또한 쿼크 모드라고도 함)가 켜져 있습니다. 엄격 모드, 표준 모드 또는 엄격 모드라고 함). 따라서 이전 테스트 예에서는 DOCTYPE이 없는 HTML 문서가 모든 브라우저에서 혼합 모드로 렌더링되고 구문 분석됩니다.

참고: document.compatMode는 MSDN: compatMode Property

에 도입되었습니다. 브라우저는 왜 그런 "스위치"를 만드는 걸까요? 마이크로소프트가 개발한 IE 시리즈 브라우저 중 가장 장수한 IE6은 윈도우 XP와 함께 탄생했다. 이전 버전 IE5.5와 비교하여 IE6에는 많은 주요 개선 사항이 있습니다. 페이지 렌더링의 가장 큰 변화는 IE6이 CSS1의 일부 기능을 지원한다는 것입니다. 예를 들어 블록 수준 요소의 너비와 높이를 설정하면 더 이상 테두리 주변에는 영향을 주지 않고 W3C 사양에 설명된 대로 요소 콘텐츠에만 영향을 미칩니다. 이는 IE5.5와 매우 다릅니다. 1990년대 후반에 IE6 이전 버전을 기반으로 개발된 페이지가 정상적으로 표시될 수 있도록, 즉 브라우저가 이전 버전과 호환되도록 하기 위해 Microsoft는 이 "스위치"를 탄생시켰습니다. 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와 동일합니다. 10년 전. IE처럼 다른 브라우저의 혼합 모드와 표준 모드 사이에는 큰 차이가 없습니다.

참고: IE6 향상된 CSS: Internet Explorer 6의 CSS 향상

대략적인 표준 모드

거의 표준 모드(거의 표준 모드)는 문자 그대로 표준 모드와 매우 유사하지만 약간의 차이점이 있습니다. 주로 테이블 셀 내 세로 레이아웃 렌더링의 차이에 반영됩니다. IE8, Firefox, Chrome, Safari 및 Opera 7.5부터 이러한 브라우저의 표준 모드는 CSS2.1 사양을 더욱 엄격하게 따르므로 현재 "표준"이 아닌 것으로 보이는 이전 표준 모드에는 " 대략 표준 모드' 이름입니다. 그러나 IE6, IE7, Opera 7.5 이전 버전에서는 브라우저가 CSS2.1 사양을 엄격히 따를 수 없었기 때문에 대략적인 표준 모드가 표준 모드인 것으로 이해할 수도 있습니다. .

지금까지 각 브라우저에는 주로 세 가지 모드가 포함되어 있음을 알 수 있습니다. HTML5 초안에서는 패턴 정의가 더욱 명확하게 정의되었습니다.

기존 이름	HTML5 초안 이름	document.compatMode 반환 값
표준 모드 또는 엄격 모드	no-quirks 모드	CSS1Compat
거의 표준 모드	제한적 모드	CSS1Compat
특이 모드	특이 모드	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”
字符串“>”

루트 요소 범용 식별자, 공용 식별자 및 시스템 식별자는 각각 document.doctype.name, document.doctype.publicId 및 document.doctype.systemId에 해당하는 스크립트를 통해 DOM 인터페이스를 호출하여 얻을 수 있습니다(IE6 IE7 )을 지원하지 않습니다.

위의 세 부분은 DOCTYPE마다 다를 수 있습니다. 일부 DOCTYPE에는 이러한 수많은 DOCTYPE 중에서 특정 부분을 선택하는 방법이 있습니다.

사실 브라우저는 DOCTYPE을 스니핑할 때 위 6개 부분 중 1, 2, 4, 6번째 부분만 고려하며 대소문자를 구분하지 않습니다. 각 브라우저 커널 구현에는 WebKit 커널의 DocTypeStrings.gperf 파일과 같이 이러한 일반적인 DOCTYPE에 해당하는 패턴을 기록하는 목록이 거의 항상 있습니다. 각 브라우저 목록의 트리거 모드 차이로 인해 일부 DOCTYPE이 . 목록 외부의 DOCTYPE의 경우 브라우저 간의 처리 차이로 인해 다른 모드가 발생합니다. 예를 들어 일부 브라우저는 목록 외부의 DOCTYPE을 표준 모델로 처리할 수 있습니다.

그래서 DOCTYPE을 선택할 때 가장 먼저 확인해야 할 것은 HTML 문서가 표준 모드를 사용하기를 원한다는 것입니다.

단순함을 추구한다면 HTML5 DOCTYPE이 최선의 선택입니다: 모든 주류 브라우저는 1, 2, 6부만 포함하는 이 가장 짧은 DOCTYPE을 표준 모드로 간주합니다.

안정성을 추구한다면 HTML4.01 Strict의 이전 DOCTYPE도 좋은 선택입니다. 모든 주요 브라우저에서 실행되는 모드는 위의 HTML5와 정확히 동일합니다.

때때로 특별한 상황에 처해 브라우저가 거의 표준 모드에 있기를 원하는 경우 다음을 선택할 수 있습니다. .

참고: Firefox의 DTD 및 브라우저 작업 모드 관련: Mozilla의 DOCTYPE 스니핑

이전에 표시할 수 없는 DOCTYPE 콘텐츠

앞서 언급했듯이 DOCTYPE은 브라우저가 HTML 문서에 대해 채택하고 표시해야 하는 모드를 결정하는 "스위치" 역할을 합니다. HTML 문서의 앞부분에 있습니다. 그러나 어떤 이유로 인해 일부 작성자는 서버에서 출력하는 일부 정보인 DOCTYPE 이전의 일부 콘텐츠를 차단할 수도 있습니다. 이렇게 하면 브라우저가 가장 먼저 보게 되는 것은 DOCTYPE이 아니므로 페이지에 DOCTYPE이 없다고 생각할 수 있으며 혼합 모드가 실행될 수 있습니다. 그러나 실제로 각 브라우저는 이를 다르게 처리합니다. DOCTYPE 앞에 나타날 수 있는 콘텐츠는 다음과 같이 분류됩니다.

일반 텍스트
HTML 태그
HTML 댓글
XML 선언
IE 조건부 주석

일반 텍스트와 HTML 태그의 경우 모든 브라우저가 혼합 모드로 들어갔습니다. 의심되는 HTML 문서 본문을 보니 이해하기 쉽습니다. Tai는 DOCTYPE이 어디에 있는지 추적합니다.

HTML 주석 및 XML 선언의 경우 위의 일반 텍스트 및 HTML 태그와 약간 다릅니다. 즉, 표시되지 않습니다. 현재 일부 브라우저는 매우 "지능적"인 것으로 보이며 IE가 아닌 브라우저는 해당 브라우저의 존재를 무시하고 DOCTYPE이 올바르게 구문 분석됩니다. 그러나 IE6에서는 DOCTYPE 이전의 XML 선언으로 인해 페이지가 무차별 모드로 전환되고 모든 IE에서는 DOCTYPE 이전의 HTML 주석이 있는 페이지가 무차별 모드로 전환됩니다. IE9에서 이런 일이 발생하면 브라우저는 콘솔에 "HTML1113: IE9 Standard에서 Quirks로 문서 모드가 다시 시작되었습니다"라는 메시지를 표시합니다. ", Microsoft는 현 시점에서 "트렌드를 따를" 의도가 없는 것 같습니다. 그렇게 하면 작성자가 DOCTYPE 앞에 다른 콘텐츠를 추가하지 않도록 유도할 수도 있습니다.

일부 작성자는 똑똑하고 필요한 것을 DOCTYPE 앞에 추가합니다. 콘텐츠로 인해 IE가 무차별 모드로 들어가도록 하지 않고 다음과 같이 작성할 수 있습니다.

또는

<--[if !IE ]>일부 텍스트

위의 IE 조건부 주석은 IE가 아닌 브라우저에서는 완전히 무시될 수 있으며 IE에서는 모두 사라지기 때문입니다. 이는 IE 조건부 주석의 역할이므로 현재는 DOCTYPE 이전에 무언가를 작성하고 모든 브라우저가 표준 모드에 있는지 확인하는 더 적절한 접근 방식이지만 여전히 DOCTYPE 이전에는 비어 있지 않은 콘텐츠를 추가하는 것을 권장하지 않습니다.

참고: 조건부 주석 정보

권장 사항

위의 역사적 검토 및 분석을 통해 우리는 현재 주류 브라우저에서 DOCTYPE의 핵심 역할을 확인했으며 각 브라우저의 표준 모드에 가장 적합한 DOCTYPE을 트리거하는 기능도 발견했습니다. 다양한 브라우저 간의 호환성 문제 위험을 최소화합니다. 올바른 DOCTYPE을 선택하고 DOCTYPE이 HTML 문서의 절대 시작 부분에 배치되도록 하면 DOCTYPE이 올바른 기능을 수행할 수 있습니다

테스트 환경

운영 체제 버전:	Windows 7 Ultimate build 7600
브라우저 버전:	IE6 IE7 IE8 IE9 Firefox 4.0.1 Chrome 12. 0.742.100 사파리 5.0 .5 Opera 11.11
테스트 페이지:
이 문서가 업데이트되었습니다:	2011-06-17