异步加载JS
javascript异步加载的三种方案:
1.defer异步加载,但要等到dom文档全部解析完才会被执行。只有ie能用,也可以将代码写到内部。
<script src="" defer="defer">
script标签变成异步
</script>
2.async 异步加载,加载完成就执行,async只能加载外部脚步,不能把js写在script标签里面
<script src="" async="async">
//里面js代码
</script>
1和2执行同时不阻塞页面
3.创建script,插入到DOM中,加载完毕后callBack(注意在dom解析种只有script标签中的src这一个是同步的,其余全是异步)
//封装
function loadScript(url, callback) {
var script = document.createElement('script');
// script.src = url; //考虑
//进行判断
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "complete" || script.readyState == "loading") {
callback();
}
}
} else {
script.onload = function() {
callback();
}
}
script.src = url; //为啥要把src赋值放在后面
document.head.appendChild(script); //加入到上面代码都执行完成了,就没有用了 比如onclick事件你已经点击完成了再去绑定所以显得很矛盾
}
loadScript("4.js", function() {
test();
})
loadScript("4.js", function() {
fun();
})
// 按需加载代码
// javascript异步加载和ajax没有任何关系
</script>