浏览器工作原理——step2 解析HTML构建DOM树（整理）
2020-01-20 本文已影响0人
维仔_411d
HTML代码解析
向服务器请求到HTML（response的body中的内容）后，就要对其进行解析。
HTML的结构不算太复杂，我们日常开发需要的90%的“词”（编译原理的token，表示最小的有意义的单元），种类大致有标签开始、属性、标签结束、注释、CDATA节点几种。
| 类型 | 示例 |
|---|---|
| "开始标签"的开始 | <abc |
| attra="xxx" | 属性 |
| "开始标签"的结束 | > |
| 文本节点 | Hello World |
| 结束标签 | </abc> |
| 注释 | <! -- 注释内容 --> |
| CDATA数据节点 | <![CDATA[hello world!]] |
1-1 词（token）是如何被拆分的
示例：
<p class="a">text1 text text</p>
- <p "开始标签"的开始
- class="a" 属性
- > "开始标签"的结束
- text1 text text 文本
- </p> 结束标签
从HTTP协议收到的字符流读取字符， 浏览器工程师想要把 字符流解析成词（token），最常见的方案就是使用状态机
1-2 状态机
绝大多数语言的词法部分都是用状态机实现的，HTML 官方文档规定了 80 个状态
构建DOM树
接下来要把这些词变成DOM树，这个过程是使用栈来实现的
- 栈顶元素就是当前节点；
- 遇到属性，就添加到当前节点；
- 遇到文本节点，如果当前节点是文本节点，则跟文本节点合并，否则入栈成为当前节点的子节点
- 遇到注释节点，作为当前节点的子节点；
- 遇到tag start 就入栈一个节点，当前这个节点就是这个节点的父节点；
- 遇到tag end 就出栈一个节点（还可以检查是否匹配）
推荐一位写的html词法解析+DOM树构建 示例 https://github.com/aimergenge/toy-html-parser
