JavaScript JS 加载时间线

A 创建对象 document B 解析 C 执行

1 创建Document 对象 开始解析web页面

这个阶段 document.readyState = ‘loading’;

2 遇到 link 外部css ，创建线程加载，并继续解析文档。

3 遇到 Script 外部 js ，并且没有设置 async , defer

浏览器加载，并阻塞，等待js加载完成并执行该

4 遇到 外部 js ，并且设置有 async , defer

浏览器创建线程加载，并且不阻碍文档解析，
对async 属性的脚本，脚本加载完成后立即执行。
（异步加载 ， 禁止使用 document.write() ）

5 遇到img标签 ，

先正常解析dom结构， 然后浏览器异步加载src ， 并继续向下解析。

6 当文档解析完成

document.readState = ’ interactive ’ ;

7 文档解析完成后，所有设置有 defer的脚本会按照顺序执行。

8 document对象触发DOMContentLoaded 事件 ，

解析完后 可以识别事件

9 当所有async的脚本加载完成并执行后，img加载完成后，

document.readyState = ’ complete ’ , window对象触发 load事件