# 深入理解浏览器解析渲染 HTML
除了知道如何用代码实现一个页面之外，最重要的是明白这个页面是如何被浏览器解析和渲染，并最终呈现在我们面前的。
## 更新
### 2021-12-15
见下文 [CSS 在 HTML 中不同位置的影响](#2021-12-15-更新) 部分。
## 前言
作为 Web 工程师，我们每天写 HTML，CSS 和 JavaScript，但是浏览器是如何解析这些文件，最终将它们以像素显示在屏幕上的呢？
这一过程叫做 _Critical Rendering Path_。
## Critical Rendering Path
_Critical Rendering Path_，中文翻译过来，叫做**关键渲染路径**。指的是浏览器从请求 HTML，CSS，JavaScript 文件开始，到将它们最终以像素输出到屏幕上这一过程。包括以下几个部分：
1. 构建 DOM
- 将 HTML 解析成许多 Tokens
- 将 Tokens 解析成 object
- 将 object 组合成为一个 DOM 树
2. 构建 CSSOM
- 解析 CSS 文件，并构建出一个 CSSOM 树（过程类似于 DOM 构建）
3. 构建 Render Tree
- 结合 DOM 和 CSSOM 构建出一颗 Render 树
4. Layout
- 计算出元素相对于 viewport 的相对位置
5. Paint
- 将 render tree 转换成像素，显示在屏幕上
值得注意的是，上面的过程并不是依次进行的，而是存在一定交叉，后面会详细解释。
想要提高网页加载速度，提升用户体验，就需要在第一次加载时让重要的元素尽快显示在屏幕上。而不是等所有元素全部准备就绪再显示，下面一幅图说明了这两种方式的差异。
**为了便于理解，我下面使用 Chrome Dev Tool 的 Performance 来描述 CRP 过程，但是根据[官网文档](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp#devtools)，DevTool 并不适合特别精确细致的分析，不过对于理解 CRP，已经足够。**
## 构建 DOM
_DOM (Document Object Model，文档对象模型)_，构建 DOM 是必不可少的一环，浏览器从发出请求开始到得到 HTML 文件后，第一件事就是将 HTML 解析成许多 Tokens，再将 Tokens 转换成 object，最后将 object 组合成一颗 DOM 树。
这个过程是循序渐进的，我们假设 HTML 文件很大，一个*RTT (Round-Trip Time，往返时延)* 只能得到一部分，浏览器得到这部分之后就会开始构建 DOM，并不会等到整个文档就位才开始渲染。这样做可以加快构建过程，而且由于自顶向下构建，后面的构建不会对前面造成影响。**而后面我们将会看到，CSSOM 则必须等到所有字节收到才开始构建。**
**这一部分对应 Dev Tool Performance Panel 里的*Parse HTML*过程。**
## 构建 CSSOM
_CSSOM (CSS Object Model，CSS 对象模型)_，构建过程类似 DOM，当 HTML 解析中遇到``标签时，会请求对应的 CSS 文件，当 CSS 文件就位时便开始解析它（如果遇到行内`