已经有许多的文章介绍了浏览器解析Html。这里只是进行引用和理解。
https://juejin.im/post/6844903745730396174
https://zhuanlan.zhihu.com/p/30898865
https://segmentfault.com/q/1010000000640869
https://www.zhihu.com/question/30218438
从这些文章知道：
首先，html包括dom、css、js等。
解析大致过程是浏览器首先构建Dom树，同时构建基于CSS树，然后合并成渲染树，最后绘制到页面。
一、构建Dom树
构建Dom树的过程和编译型语言不同，作为脚本语言，是逐句解析的。怎么理解逐句解析？也就是一行行代码的解析，一行行的加载代码， 只要满足了解析器的要求（例如发现是可以解析的），那就足够了，解析器并不关心后面的代码是什么（没有大局观，只有当下），永远只关心目前解析过的代码所构建的一种 环境。
- 解析
Dom树解析的过程中，如果碰到
如果是外联的脚本（也就是有src指向的链接的），那么先把脚本源码从链接处下载（也称加载）下来，然后执行这段JS代码。这里的加载和执行不一定是阻塞方式。
某些耗时间的
就只会阻塞的方式下载JS，之后会等到合适时机在执行该JS。该JS会在整个页面加载（load事件）前被执行，但可能会在Dom树构建完成（document对象会派发事件DOMContentLoaded来通知dom树已构建完成）之后执行。
类似的有defer关键字，它与async区别是，一定会在元素解析完成之后，Dom树构建完成之前执行。PS.async和defer只适用于外联脚本。
defer的设计解决的情形是：有些JS喜欢访问Dom并修改Dom树，而Dom此时却没构建完。
- 解析CSS，构建CSS规则树
就是把CSS下载下来，构建CSS树（与Dom树并行构建）。
