js加载时间线

js加载时间线是一个理论依据,为以后优化一些东西做一些基本的理论支持;


时间线:通俗来说就是当浏览器出生的那一刻开始所记录的一系列浏览器按顺序所做的事儿;浏览器在运行一个页面时,首先会初始化js的功能,当初始化初试完js这一个功能后,也就是js开始发挥作用那一刻,开始记载着这一系列浏览器要发生的过程;


那么这一系列顺序分为十步,如下:

1、创建Document对象,开始解析Web页面;此阶段document.readyState = 'loading';

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

3、遇到script外部js,并且没有设置async、defer,浏览器加载并阻塞,等待js加载完成并执行该脚本,继续解析文档;

4、遇到script外部js,并且设置有async、defer,浏览器创建线程,并继续解析文档;

5、遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档;

6、当文档解析完成,document.readyState = 'interactive';

7、文档解析完成后,所有设置有defer的脚本会按照顺序执行。(注意defer与async的区别,可见另一篇博客);

8、document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段;

9、当所有async的脚本加载完成并执行后,img等加载完成后,document.readyStste = 'complete',window对象触发load事件;

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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值