如何实现JavaScript文件的同步和异步加载
这篇文章主要介绍了如何实现JavaScript文件的同步和异步加载，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
同步加载
可在html文件里以<script>标签插入，这是初学时最基本的方式。
准备两个js文件如下：
calc1.js
console.log('calc1 loading begin')
function add(...args) {
return args.reduce((currentTotal, i) => currentTotal + i, 0);
}
console.log('calc1 loading end')calc2.js
console.log('calc2 loading begin')
console.log(add(1,2,3))
console.log('calc2 loading end')calc2.js 是依赖calc1.js的。
html文件如下：
<body>
<script class="lazy" data-src="calc1.js">
</script>
<script class="lazy" data-src="calc2.js">
</script>
</body>这种方式下，文件加载是同步的。即calc1.js加载完成后，才加载calc2.js，所以保证了calc2.js总能正确地调用calc1里的add函数。在Chrome里的调试结果如下：
但同步加载的缺点也明显，如果有多个文件的时候，全部加载时间会很长，而且阻塞用户界面响应。
通过Script Element异步加载
异步加载的优点是，能够同时加载多个js文件，而且由于是异步，不会阻塞用户界面，用户体验好。当然缺点是，不能保证有依赖关系的文件的加载顺序。
html 代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var script1 = document.createElement('script');
script1.class="lazy" data-src='calc1.js';
script1.type='text/javascript';
var script2 = document.createElement('script');
script2.class="lazy" data-src='calc2.js';
script2.type='text/javascript';
document.getElementsByTagName('head')[0].appendChild(script1).appendChild(script2);
</script>
</head>在Chrome里的调试结果有时候能正确的输出如下：
但有时候由于clac1.js没有被先加载，calc2.js执行时会报错。
那么我们就得需要解决加载顺序问题，保证calc1.js先加载。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function loadScript(file, callbackFn) {
var script = document.createElement('script');
script.class="lazy" data-src= file;
script.type='text/javascript';
// 监听onload时间，当前js文件加载完成后，再加载下一个
script.onload = callbackFn;
document.getElementsByTagName('head')[0].appendChild(script)
}
loadScript('calc1.js', function () {
loadScript('calc2.js');
} );
</script>
</head>这样就能永远输出正确结果了。
通过 AJAX 加载JS文件
<script>
function loadScript(file, callbackFn) {
var xhr = new XMLHttpRequest();
xhr.open('get', file, true);
// for IE
if (xhr.onreadystatechange) {
xhr.onreadystatechange = function () {
console.log(xhr.readyState, xhr.status);
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
insertScriptText(xhr.responseText);
if (callbackFn) {
callbackFn();
}
}
}
}
} else {
xhr.onload = function () {
insertScriptText(xhr.responseText);
if (callbackFn) {
callbackFn();
}
}
}
xhr.send(null);
}
function insertScriptText(scriptText) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = scriptText;
document.body.appendChild(script);
}
loadScript('calc1.js', function () {
loadScript('calc2.js');
});
</script>也能正确的输出结果。
感谢你能够认真阅读完这篇文章，希望小编分享的“如何实现JavaScript文件的同步和异步加载”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
