## HTML解析，构建DOM
整个渲染步骤中，HTML解析是第一步。
简单的理解，这一步的流程是这样的：**浏览器解析HTML，构建DOM树。**
但实际上，在分析整体构建时，却不能一笔带过，得稍微展开。
解析HTML到构建出DOM当然过程可以简述如下：
```
Bytes → characters → tokens → nodes → DOM
```
譬如假设有这样一个HTML页面：（以下部分的内容出自参考来源，修改了下格式）
```
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
```
浏览器的处理如下：
:-: 
列举其中的一些重点过程：
```
1. Conversion转换：浏览器将获得的HTML内容（Bytes）基于他的编码转换为单个字符
2. Tokenizing分词：浏览器按照HTML规范标准将这些字符转换为不同的标记token。每个token都有自己独特的含义以及规则集
3. Lexing词法分析：分词的结果是得到一堆的token，此时把他们转换为对象，这些对象分别定义他们的属性和规则
4. DOM构建：因为HTML标记定义的就是不同标签之间的关系，这个关系就像是一个树形结构一样
例如：body对象的父节点就是HTML对象，然后段略p对象的父节点就是body对象
```
最后的DOM树如下：
:-: 
- Web 开发笔记
- 从输入 URL 到页面加载完成的过程中都发生了什么事情？
- 从浏览器接收url到开启网络请求线程
- 开启网络线程到发出一个完整的http请求
- 从服务器接收到请求到对应后台接收到请求
- 后台和前台的http交互
- http的缓存
- 解析页面流程
- HTML解析，构建DOM
- CSS解析，构建CSSOM
- 资源外链的下载
- CSS的可视化格式模型
- 包含块（Containing Block）
- 控制框（Controlling Box）
- BFC（Block Formatting Context）
- IFC（Inline Formatting Context）
- 其它
- JS引擎解析过程
- JS的解释阶段
- JS的预处理阶段
- JS的执行阶段
- 回收机制
- 参考资料
- JavaScript模块化编程
- AMD
- requireJS
- CommonJS
- UMD
- ES6模块
- 参考资料
- 使用 JavaScript 实现一门编程语言
- 如何使用 JavaScript 实现一门编程语言(1) —— 前言
- 如何使用 JavaScript 实现一门编程语言(2) —— 编写一个解析器
- 如何使用 JavaScript 实现一门编程语言(3) —— Input stream
- 如何使用 JavaScript 实现一门编程语言(4) —— Token stream
- 如何使用 JavaScript 实现一门编程语言(5) —— AST
- 如何使用 JavaScript 实现一门编程语言(6) —— Interpreter
- 完整代码
- 参考资料
- 前端布局概论
- 参考资料
- Windows 笔记
- 错误解决
- win10应用商店无法登录提示0x80070426解决方法
- 使用技巧
- 设置 Hyper-V 和 VMware 共存
- Powershell
- WSL