浏览器加载

1. 创建Document对象,开始解析web页面,解析HTML元素和他们的文本内容后添加ELement对象和Text节点到文档中,这个阶段document.readyState = "loading"

2. 遇到link外部css,创建线程加载,继续解析文档.

3. 遇到script外部js,没有设置defer或async,加载js浏览器阻塞,等待js加载完并执行,继续解析文档

4. 遇到script外部js,并且设置延迟属性,浏览器创建线程加载，并继续解析文档,对于async属性的脚本,脚本加载完成后立即执行,禁止用document.write()

5. 遇到img等,先正常解析dom,浏览器异步加载src,并继续解析文档

6. 当文档解析完成document.readyState = "interactive"

7. 文档解析完成后,所有设置为defer的脚本按顺序执行,禁止使用document.write()

8. document对象出发DOMContentLoaded事件,这也标志着从同步脚本执行阶段转到事件驱动阶段

9. 当所有defer的脚本加载完成后,img等加载完成,document.readyState = "complete",window对象触发onload事件

10. 从此,以异步方式处理用户输入,网络事件等

//DOMContentLoaded can only bind to addEventListener
document.addEventListener("DOMContentLoaded", function() {
  console.log("a")
}, false)