原生JS篇二、文档模式以及DOCTYPE
2019-10-13 本文已影响0人
悠扬小曲儿
屏幕快照 2019-10-13 下午8.32.13.png
面试中也常会问到关于文档模式的问题，那么我们就来了解一下文档模式到底是什么呢，以及它影响着什么呢？
文档模式的概念是由IE提出的，最初有两种文档模式：混杂模式和标准模式。两种模式主要会影响CSS内容的呈现，但在某些情况下也会影响到Javascript的解释执行。IE先提出后，其他浏览器纷纷效仿，因此浏览器都有这两种文档模式，决定着网页将会以什么样的行为准则渲染。
<!DOCTYPE html>
以上代码应该都很熟悉，我们经常在自己的html文件的开头加上这行代码，这叫作文档类型声明。这行代码至关重要，因为如果在文档的开头没有文档类型声明，则所有浏览器都会默认开启混杂模式，但不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有什么一致性可言。
因此在HTML5中只要加上了上面的那一行代码，就开启了标准模式。此时浏览器就只能老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有浏览器里显示的就是一个样子。
扩展
DOCTYPE：一种标准通用标记语言的文档类型声明，作用就是告诉标准通用标记语言解析器，他应该用什么样的文档类型定义(DTD)来解析文档，也就是我们上面说的声明文档的解析类型，避免浏览器的怪异模式（按照浏览器自己的方式来解析执行代码，即混杂模式）。
原理
有一个属性叫document.compatMode它有两个值：
- BackCompat:怪异模式，浏览器是用自己的方式解析渲染页面；
- CSSCompat:标准模式，浏览器使用W3C标准解析渲染页面；
document.compatMode属性会被浏览器识别并使用，但是如果你的页面里没有DOCTYPE声明，那么compatMode默认为BackCompat，浏览器就会按照自己的方式解析渲染页面，即混杂模式。
