浏览器加载的时间线

一、创建 document 对象

开始解析Web页面。解析HTML元素和它们的文本内容后添加 element 对象和text节点到文档中，这个节点的 document.readyState = 'loading'。

二、加载到link的外部CSS

创建一个线程加载这个资源，并且继续解析文档

三、加载到script的外部 JS（1）

如果script标签上没有设置async、defer等表示异步加载的属性，那么浏览器加载，并且阻塞页面、等待它加载完并且执行完这个脚本

四、加载到script的外部 JS（2）

遇到有async、defer等表示异步加载的属性，创建一个线程加载，不阻塞页面，对于有async 属性的JS，脚本加载完成后就立即执行（异步加载禁止使用document.write等方法）

五、遇到img标签

先根据它的宽高正常解析dom结构（给img在文档中占位），而后创建一个线程加载img的资源

六、文档解析完成后

此时dom的解析完成，wanchdocument.readyState = 'interactive'，所有设置了defer 的脚本按照顺序执行

七、document 对象触发DOMContentLoaded 事件

标志着程序的运行由同步脚本驱动阶段转换成事件驱动阶段
浏览器开始监听输入事件、点击事件等由用户触发的事件了、

八、当所有资源被加载完成后

例如img等异步标签加载完成后、async脚本加载并执行完毕
document.readyState = complete
window上几个事件的加载顺序

1. loading
2. interactive
3. DOMContentLoaded ，这个事件只能用addEventListener绑定
4. load
   window 对象触发 load 事件