异步加载方案:
script是一个同步的代码
1.defer : 等DOM Tree生成之后才执行也可以加载异步的脚本
<script defer src = "引入js文件"></script>
<script src = "引入js文件">defer</script>
2.async:只能异步加载外部的链接文件,不能加载内部脚本,并且在js文件加载完后立马执行
<script src = "引入js文件" async></script>
3.按需加载:
节省资源:在需要用到的时候在去引入,不需要用的时候就不管
function loadScript(url,callback){
// 1. 创建script标签
var script = document.createElement('script');
// 4. 监听script是否下载完成
// ie中 onreadystatechange 监听对象的状态改变
if(script.readyState){
// 如果当前浏览器中有readState这个属性 再去监听script标签的状态改变
script.onreadystatechange = function(){
// 判断script是否加载完成
if(script.readyState == 'loaded' || script.readyState == 'complate'){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
// 2.
script.src = url; // 异步加载js文件 已经变了下载完成,状态不会再发生变化,所以监听事件不会被触发
// 3. 将标签追加到body中
document.body.appendChild(script);
}
loadScript('01.js',demo);
}