1. 影响浏览器渲染方式的文档模式
每个浏览器都有自己的页面渲染引擎。渲染引擎包括两部分：一部分负责 HTML、CSS 代码的解析（渲染引擎，如 blink 引擎 or 内核），一部分负责 JavaScript 代码的解析（JavaScript 引擎，如 V8 引擎）。浏览器的渲染模式（以何种文档模式进行渲染）主要对 CSS 解析有影响（也对脚本有一些影响）。不同的渲染模式，在 CSS 解析上存在差异，比如对盒模型的处理。
不同的渲染模式是历史遗留问题造成的。早期 W3C 没统一标准，浏览器生产商自己决定页面如何渲染；标准出来后，现有浏览器渲染肯定存在与标准不同的地方。为了兼容，就出现了两种浏览器渲染模式（IE 最早提出），正统叫法为文档模式(Document Mode)（如果文档是按照标准编写的，浏览器采用标准渲染模式；如果文档并没有按照标准编写，那么浏览器以怪异模式渲染）。此外，还有第三种模式—近标准模式。那么浏览器又该如何知道文档有没有按照标准编写呢？实际上浏览器在渲染页面之前会检查两个内容，一个是页面是否有 DOCTYPE 信息，另外一个是页面是否有 x-ua-compatible 信息。DOCTYPE 告诉浏览器：我的文档是哪种模式，你确定后，就按这种模式渲染；如果没有这个头信息，浏览器就按怪异模式渲染。x-ua-compatible 是 IE8 的一个专有属性，可以指定浏览器以怎样的模式进行渲染。
注意：浏览器模式和浏览器渲染模式是两个概念，前者可以理解为IE浏览器中特有的概念，后者在本文中就是指文档模式。
2. HTML 文档的解析过程
当用户在浏览器键入某网站地址，网站首页文档 index.html 加载完成后，浏览器开始解析 HTML。下文根据不同的 HTML 资源结构分析解析过程。
2.1 纯 HTML 文档，无 CSS 和脚本
如果 HTML 文档中只有 HTML，没有 CSS 和脚本的话，问题极其简单。浏览器解析 HTML，构建 DOM 树，DOM 树构建完成后（触发 DOMContentLoaded 事件），构建 render 树，接着布局和绘制像素。
2.2 包含内联样式和内联脚本的 HTML 文档
如果 HTML 文档中存在内联样式和脚本，这个时候，问题变得稍微复杂一些。浏览器解析 HTML，构建 DOM 树，当解析到