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、从此,以异步响应方式处理用户输入,网络事件等;