浏览器的加载url---DOM树的解析（2019-1-23）

DOM树的解析

2019-1-25 更新：
看到一篇写的不错的英文，语法很简单，都可以看懂,讲述了浏览器怎么加载网页，有机会的话，先看完在做翻译。
https://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/

里面介绍了：How the pre-loader improves network utilisation

When the browser is blocked on a script, a second lightweight parser scans the rest of the markup looking for other resources e.g. stylesheets, scripts, images etc., that also need to be retrieved.
// 当浏览器解析被script标签阻塞的时候，另一个轻量级的解析起扫描余下的文档，寻找那么需要被取回的资源：css js img等等

当拿到html的内容之后，有一套特定的语法规则来解析html，解析文档是指将文档转化成为可让代码理解和使用的结构，包括词法分析和语法分析

浏览器的解析器基本可以分为两个阶段：标记化和树构建

标记化是词法分析过程

将输入内容解析成多个标记。HTML 标记包括起始标记、结束标记、属性名称和属性值。
标记生成器识别标记，传递给树构造器，然后接受下一个字符以识别下一个标记；如此反复直到输入的结束

标记化算法的输入结果是HTML标记，使用状态机表示。状态机一共有4个状态：
- 数据状态(Data)、
- 标记打开状态(Tag open)、
- 标记名称状态(Tag name)、
- 关闭标记打开状态(Close tag open state)。

标记化算法过程：
Hello world
- 初始状态是数据状态
- 遇到字符 < 时，状态更改为“标记打开状态”
- 接收一个 a-z 字符会创建“起始标记”，状态更改为“标记名称状态”
- 这个状态会一直保持到接收 > 字符。在此期间接收的每个字符都会附加到新的标记名称上，
- 遇到 > 标记时，会发送当前的标记，状态改回“数据状态”，本例子的标记名称为 html
-  标记也会进行同样的处理
- 现在我们回到“数据状态”。接收到 Hello world 中的 H 字符时，将创建并发送字符标记
- 现在我们回到“标记打开状态”。接收下一个输入字符 / 时，会创建 end tag token 并改为“标记名称状态”
- 我们会再次保持这个状态，直到接收 >。然后将发送新的标记，并回到“数据状态”

树构建整理来自这个博客 https://blog.csdn.net/Alan_1550587588/article/details/80297765

树构建又叫做语法分析


树构建算法：
- 在创建解析器的同时，也会创建 Document 对象
- 树构建器接收到标签解析器发来的起始标签名后，会加入到栈中，此时还未向DOM树中添加任何结点
- 当接收到一个带有结束标签，此时查询栈顶元素，
  如果和传入的结束标签属于同种类型的标签，则将栈顶元素弹出，向DOM树中加入此节    
  点，然后继续向下解析
- 如果遇到的是没有封闭标签的元素如，则直接加入DOM树中即可，无需入栈。
- 依次向下解析，当栈为空，即根节点也加入到DOM树中，DOM树构建完毕。

注意⚠️：
这里需要指出的是，当某个元素缺失结束标签时，栈顶元素是
，
但是此时传来的结束标签是，两者不是同一种标签，说明div缺少了结束标签，
这种情况也将栈顶
元素弹出，加入到DOM树中。
相当于给
补了一个
结束标签，这就是解析器的高容错机制。

所以解析的html的过程中

• 遇到link标签，会重新开一个下载线程去下载，html解析不会中断，
• 遇到script标签的时候会等待文件下载完成，立即执行，执行完毕后再向下解析，
  会阻塞html的dom解析，才会有优化html结构的时候，把css放在头部，把script放在尾部
• 遇到img标签的时候，也和css一样浏览器重新开一个下载线程去下载，不会阻塞dom的解析

defer和async

https://segmentfault.com/a/1190000008299659

image.png

• defer 是一个延迟执行的标示 当