js加载时间线
2018-02-27 20:54
239 查看
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、从此,以异步响应方式处理用户输入,网络事件等;
时间线:通俗来说就是当浏览器出生的那一刻开始所记录的一系列浏览器按顺序所做的事儿;浏览器在运行一个页面时,首先会初始化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、从此,以异步响应方式处理用户输入,网络事件等;
相关文章推荐
- JS加载时间线
- js加载时间线
- JavaScript之js加载时间线精解
- js加载时间线
- js(十七)---js加载时间线和BOM
- 异步加载js 和 js时间线介绍
- jquery.superslider.js实现轮播图懒加载,一级jquery.lazyload.js实现图片的懒加载
- https网站无法加载http路径的js和css
- jquery mobile转场时加载js失效(转)
- js 加载事件
- js加载完所有的图片,适合电子相册哦~~~~
- 页面加载完成后自动执行一个方法函数的JQ、JS方法
- 详谈LABJS按需动态加载js文件
- js window.onload 加载多个函数的两种方法
- 利用js将ajax获取到的后台数据动态加载至网页中
- 黄聪:异步加载JS的4种方式(详解)
- JSP加载JS文件不起作用的问题
- in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
- js下判断 iframe 是否加载完成的完美方法
- iOS UIWebView 中 js调用OC 打开相册 获取图片, OC调用js 将图片加载到html上