异步加载js方法与js加载时间线
学习笔记中摘取出来并整理的,是关于异步加载与时间线的内容,希望让更多的小伙伴能从中学习更多关于js的知识
js加载时间线
1.创建Document对象,开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。
2.遇到link外部css,创建线程加载,并继续解析文档。
3.遇到script外部js,并且没有设置async、defer,浏览器加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析文档。
4.遇到script外部js,并且设置有async、defer,浏览器创建线程加载,对于async属性的脚本,脚本加载完成后立即执行。(异步禁止使用document.write())
5.遇到img标签,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。
6.当文档解析完成,document.readyStart=‘interactive’。
7.文档解析完成后,所有设置有defer的脚本会按照顺序执行。(注意async的不同,但同样禁止使用document.write())
8.document对象触发DOMContentLoaded事件,这也标志着程序执行从同步执行阶段,转化为事件驱动阶段。
9.当所有async的脚本加载完并执行后、img等加载完成后,document.readyStart=‘complete’,window对象触发load事件。
10.从此,以异步响应方式处理用户输入、网络事件等。
异步加载JS
异步加载有三种方法
1.defer //IE有 IE9以下能用
整个dom文档解析完,才执行,能把js写在script标签里
eg:
<script src="js/jquery-3.3.1.js"defer="defer"></script>//从此变成异步加载
2.async //除了低版本IE都能用
与上边一样替换即可
加载完就执行,async 只能加载外部脚本,不能把js写在script标签里
1和2执行时不会赌赛页面
3.创建script,插入dom中,加载完毕后callBack
eg:
var script=document.createElement('script');
script.type = "text/javascript";
script.src = "tools.js"; //由于是异步下载,系统往下走,直接调用里边的方法会报错的,得等一会
document.head.appendChild(script);
优化:
var script=document.createElement('script');
script.type = "text/javascript";
script.src = "tools.js";
①
//下边只有IE有
script.readyState ="loading" //加载完时会变成loaded或complete
//当状态码发生改变时会触发onreadystatechange事件
script.onreadystatechange = function(){
if(script.readyState == "complete" || script.readyState == "loaded"){
test(); //调用里边的方法
}
}
②
//除了IE的浏览器 判断是否加载完js
script.onload=function(){ //加载完,执行方法
//兼容性特别强Safari chrome firefox opera
test(); //调用里边的方法
}
整合:
var script=document.createElement('script');
script.type = "text/javascript";
script.src = "tools.js";
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == "complete" || script.readyState == "loaded"){
test();
}
}
}else{
script.onload=function(){ //加载完,执行方法
//兼容性特别强Safari chrome firefox opera
test(); //调用里边的方法
}
}
document.head.appendChild(script);
封装 loadScript : //按需加载执行,也就是说只想用库里某个方法才会用到
//如果想加载工具库没必要传回调函数,监控加载完就行了返回一个信号
function loadScript(url,callback) {
var script=document.createElement('script');
script.type = "text/javascript";
if(script.readyState){
script.onreadystatechange = function(){ //IE
if(script.readyState == "complete" || script.readyState == "loaded"){
callback(); //调用里边的方法
}
}
}else{
script.onload=function(){ //加载完,执行方法
//兼容性特别强Safari chrome firefox opera
callback(); //调用里边的方法
}
}
script.src = url; //为了避免状态瞬间变化完无法绑定IE监听所以放到了绑定下边,先绑定后下载
document.head.appendChild(script);
}
loadScript('demo.js',function () { //不可以直接传 test,程序不会识别,会出现test没定义错误,可以使用匿名函数
test();
});
//还有一种 不安全的方法
//eval() 方法或setInterval() 把里边字符串当代码执行
//eval( callback);//替换 callback();
// loadScript('demo.js','test()');
//还有一种
//tools[callback](); //替换 callback(); tools指的是函数库
//比如 var tools ={
// test : function(){ },
// demo : function(){ },
// }
// loadScript('demo.js','test');
关于异步加载js方法整合与封装与js加载时间线的内容到这里就结束了,欢迎大家在下方评论与分享心得。。。