-
1、async
在script标签中使用async
但是不能控制加载顺序 推荐RequireJS
<script type="text/javascript" src="demo_async.js" async="async"></script>
- 不写async 不写defer放在头部，则解析html的时候，在浏览器解析页面之前会直接读取并执行脚本
- 如果async = "async":脚本相对于页面其他部分异步执行（页面一边解析一边执行脚本）
- 不使用async 且defer="defer":脚本将在页面解析完毕后执行；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src='../Scripts/js1.js' async></script>
<script>
console.info('html文件执行');
</script>
</body>
</html>
2.js1.js
(function(){
console.info('js文件执行');
alert(3);
})();
image.png
- 2、动态创建 script DOM：document.createElement('script');
- 3、XmlHttpRequest 脚本注入
function loadScript(url){
let xhr = new XMLHttpRequest()
xhr.open('get',url,true)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304){
let script = document.createElement('script')
script.type = 'text/javascript'
script.text = xhr.responseText
document.body.appendChild(script)
}
}
}
xhr.send(null)
}
-
异步加载库 LABjs
源码地址：https://github.com/getify/LABjs
实现方式：
<script src="LAB.js"></script>
<script>
$LAB
.script("http://remote.tld/jquery.js").wait()
.script("/local/plugin1.jquery.js")
.script("/local/plugin2.jquery.js").wait()
.script("/local/init.js").wait(function(){
initMyPage();
});
</script>
-
模块加载器 Sea.js
网友评论