JavaScript-js加载时间线

1:创建Document对象,开始解析web页面,解析他们的html元素和其文本内容。此阶段document.readyState='loading'.

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

3:遇到script外部js,并没有设置async,defer,那么浏览器加载阻塞,等待js文件加载完后,再继续加载文档。

4:遇到script外部js,设置了async,defer,浏览器创建新的线程加载此文件,并继续解析此文档,对于async的加载完后就执行,而defer需要等待文档全部解析完后在执行。此时里面禁止使用document.write()这个方法会对页面进行覆盖的。

5:遇到img等先解析此dom结构,然后开启一个新的线程异步加载src,继续解析文档。

6:当文档解析完时。document.readyState='interactive';

7:当文档结束时,按顺序一次执行设置了defer的脚本。

8:document对象触发DOMContentLoaded事件。标志着程序变为事件驱动阶段。

9:当所有的defer全部加载完执行完,img加载完成后,doucment.readyState='loaded'。window触发load对象。

10:以异步方式处理用户输入,网络事件。


猜你喜欢

转载自blog.csdn.net/wust_cyl/article/details/80139648