1.defer
可以异步加载内部脚本
<script defer>
脚本代码内容............
</script>
也用于异步加载外部链接的js文件
<script defer src="xxx.js"></script>
必须等待DOM树生成后，再执行加载完成后的js脚本代码
2.async
不能加载内部脚本，只能异步加载外部链接的js文件
<script src="xxx.js" async></script>
在js文件加载完后，立马执行
3.按需异步
通过事件监听脚本代码加载前后所引发的状态变化，从而实现触发事件后脚步的异步加载。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function loadScript(url,callback){
// 创建script标签 当前为未加载的状态
var script = document.createElement('script');
// 监听script是否下载完成
// 兼容性处理（针对IE）
if(script.readyState){
// 如果当前浏览器中有readState这个属性 再去监听script标签的状态改变
// onreadystatechange 监听对象的状态改变
//(如果状态发生改变，则readState属性的属性值可能为loaded或者complete)
script.onreadystatechange = function(){
// 判断script是否加载完成
if(script.readyState == 'loaded' || script.readyState == 'complete'){
callback();
};
};
}else{
// window.onload的一个类似使用
script.onload = function(){
callback();
};
};
// 异步加载js文件 当前为加载完的状态
//js文件下载完成后,当前的状态发生变化，监听事件被触发
script.src = url;
// 将标签追加到body中
document.body.appendChild(script);
};
loadScript('xxx.js',demo);
</script>
</body>
</html>xxx.js:
function demo(){
console.log("这是按需加载后的结果");
}总结
js脚本异步加载的三种方法都要知道，但按需加载更符合实际使用。
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
