js加载时间线

1. 创建Document对象，开始解析web页面，此时 document.readyState = ‘loading’
2. 遇到 link 外部引入的 css ，会开启一个新的线程进行异步加载
3. 遇到 script 外部 js ，并没有设置 defer 或 async ，会同步加载 js 文件并阻塞页面，等js加载完并执行完才继续解析页面
4. 遇到有 async或 defer 的 script，会异步加载js文件；其中设置了async的脚本会在加载完成后执行，而设置了defer的脚本会在dom树构建完成(文档解析完成)后执行
5. 遇到 img (带有src的) 等，会异步加载
6. 文档解析完成后(dom树构建完成)，设置了defer的脚本立即执行；document触发DOMContentLoaded事件(只能通过addEventListener绑定)，document.readyState = ‘interactive’；由此从同步脚本执行阶段进入到事件驱动阶段
7. 当所有的async脚本执行完，img加载完，所有的资源都加载完成后；document.readyState=‘complete’；触发onload事件
8. 从此，以异步响应方式处理用户输入、网络事件等。