11-浏览器：一个浏览器是如何工作的？（阶段二）.md

浏览器工作原理

如何解析请求回来的HTML代码 DOM树如何创建 字符流->状态机->词token->栈->DOM树

解析代码

HTML 的结构不算太复杂，我们日常开发需要的 90% 的“词”（指编译原理的术语 token，表示最小的有意义的单元），种类大约只有标签开始、属性、标签结束、注释、CDATA 节点几种。

词（token）是如何被拆分的

<p class="a">text text text</p>

代码依次拆成词（token）：

• <p“标签开始”的开始；
• class="a" 属性
• >“标签开始”的结束
• text 文本内容

• “标签结束”

浏览器工程师处理标签方法：使用状态机把字符流解析成词（token）

状态机原理

简单原理，把每个词的“特征字符”逐个拆开成独立状态，再把所有词的特征字符链合并起来，形成一个联通图结构

构建 DOM 树

使用的栈正是用于匹配开始和结束标签的方案构建 DOM 树：

• 栈顶元素就是当前节点；
• 遇到属性，就添加到当前节点；
• 遇到文本节点，如果当前节点是文本节点，则跟文本节点合并，否则入栈成为当前节点的子节点；
• 遇到注释节点，作为当前节点的子节点；
• 遇到 tag start 就入栈一个节点，当前节点就是这个节点的父节点；
• 遇到 tag end 就出栈一个节点（还可以检查是否匹配）。