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)。
标记化算法过程：
<html><body>Hello world</body></html>
- 初始状态是数据状态
- 遇到字符 < 时，状态更改为“标记打开状态”
- 接收一个 a-z 字符会创建“起始标记”，状态更改为“标记名称状态”
- 这个状态会一直保持到接收 > 字符。在此期间接收的每个字符都会附加到新的标记名称上，
- 遇到 > 标记时，会发送当前的标记，状态改回“数据状态”，本例子的标记名称为 html
- <body> 标记也会进行同样的处理
- 现在我们回到“数据状态”。接收到 Hello world 中的 H 字符时，将创建并发送字符标记
- 现在我们回到“标记打开状态”。接收下一个输入字符 / 时，会创建 end tag token 并改为“标记名称状态”
- 我们会再次保持这个状态，直到接收 >。然后将发送新的标记，并回到“数据状态”
树构建整理来自这个博客 https://blog.csdn.net/Alan_1550587588/article/details/80297765
树构建又叫做语法分析
树构建算法：
- 在创建解析器的同时，也会创建 Document 对象
- 树构建器接收到标签解析器发来的起始标签名后，会加入到栈中，此时还未向DOM树中添加任何结点
- 当接收到一个带有</>结束标签，此时查询栈顶元素，
如果和传入的结束标签属于同种类型的标签，则将栈顶元素弹出，向DOM树中加入此节
点，然后继续向下解析
- 如果遇到的是没有封闭标签的元素如<img/>，则直接加入DOM树中即可，无需入栈。
- 依次向下解析，当栈为空，即<html>根节点也加入到DOM树中，DOM树构建完毕。
注意⚠️：
这里需要指出的是，当某个元素缺失结束标签时，栈顶元素是<div>，
但是此时传来的结束标签是</body>，两者不是同一种标签，说明div缺少了结束标签，
这种情况也将栈顶<div>元素弹出，加入到DOM树中。
相当于给<div>补了一个</div>结束标签，这就是解析器的高容错机制。
所以解析的html的过程中
- 遇到link标签，会重新开一个下载线程去下载，html解析不会中断，
- 遇到script标签的时候会等待文件下载完成，立即执行，执行完毕后再向下解析，
会阻塞html的dom解析，才会有优化html结构的时候，把css放在头部，把script放在尾部 - 遇到img标签的时候，也和css一样浏览器重新开一个下载线程去下载，不会阻塞dom的解析
defer和async
https://segmentfault.com/a/1190000008299659
image.png
-
defer 是一个延迟执行的标示 当<script defer>的时候告诉浏览器,异步下载 不影响dom的parse，我猜背后的原理应该和link标签一样，也是浏览器另开了一个线程去下载，下载完了之后不去立刻执行，控制权没有给到js引擎线程，所以渲染线程才不受影响，能继续解析dom树，dom树加载完成在onload事件触发之前执行,
-
async是可以异步下载，但是下载完了之后立即执行，下载还是另开一个线程需下载的，所以不影响dom parse 但是下载完了立刻去解析，所以，控制权交给js引擎线程，所以解析被block了
网友评论