1. 词 token
专业不是计算机的博主比较尴尬，一直以为token就是验证身份用的标识
token —— 表示 “最小有意义的单元”
以这个简单的p标签为例，我们分析哪些是token：
<p class="a">text text text</p>
按最小有意义单元的定义来看，第一个词（token）是什么呢？显然，作为一个词（token），整个 p 标签肯定是过大了（它甚至可以嵌套）。
正确来说，应该拆分成这样：
- <p “标签开始”的开始
- class=“a” 属性
- > “标签开始”的结束
- text text text 文本
- </p> 标签结束
2. 词法解析 —— 获取token
浏览器的词法是怎么解析的呢？
众所周知，浏览器获取的是一个一个的字节。
因此，浏览器每获得一个字符就会走一次分析逻辑，直到获取一个完整的token
最常见的实现就是 状态机 （简单来说就是每获取一个字符，就根据上一次状态和输入的字符，来转换一次状态，直到获得一个token）
3. 语法解析 —— 用toke来构建DOM树(实际是一个栈)
其实构建DOM树也是一个状态机，需要根据上一次状态和输入的token来获取新的栈的状态
以一个简单的HTML为例：
<html maaa=a > <head> <title>cool</title> </head> <body> <img src="a" /> </body> </html>
- 创建一个栈（js用数组代替）
- 栈顶元素就是当前节点；
- 遇到属性，就添加到当前节点；
- 遇到文本节点，如果当前节点是文本节点，则跟文本节点合并，否则入栈成为当前节点的子节点；
- 遇到注释节点，作为当前节点的子节点；
- 遇到 tag start 就入栈一个节点，当前节点就是这个节点的父节点；
- 遇到 tag end 就出栈一个节点（还可以检查是否匹配）。