javascript脚本如何异步加载，有啥作用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript脚本如何异步加载，有啥作用相关的知识，希望对你有一定的参考价值。
关于javascript脚本加载的问题，相信大家碰到很多。主要在几个点——1> 同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题
2> 同步脚本和异步脚本带来的性能优化问题
深入理解脚本加载相关的方方面面问题，不仅利于解决实际问题，更加利于对性能优化的把握并执行。
先看随便一个script标签代码——
复制代码代码如下:
<script src="js/myApp.js"></script>
如果放在<head>上面，会阻塞所有页面渲染工作，使得用户在脚本加载完毕并执行完毕之前一直处于“白屏死机”状态。而<body>末尾的打脚本只会让用户看到毫无生命力的静态页面，原本应该进行客户端渲染的地方却散布着不起作用的控件和空空如也的方框。拿一个测试用例——
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>异步加载script</title>
<script src="js/test.js"></script>
</head>
<body>
<div>我是内容</div>
<img src="img/test.jpg">
</body>
</html>
其中,test.js中的内容——
代码如下:
alert(\'我是head里面的脚本代码，执行这里的js之后，才开始进行body的内容渲染!\');
我们会看到,alert是一个暂停点，此时，页面是空白的。但是要注意，此时整个页面已经加载完毕，如果body中包含某些src属性的标签(如上面的img标签)，此时浏览器已经开始加载相关内容了。总之要注意——js引擎和渲染引擎的工作时机是互斥的（一些书上叫它为UI线程）。
因此,我们需要——那些负责让页面更好看、更好用的脚本应该立即加载，而那些可以待会儿再加载的脚本稍后再加载。 参考技术A 使用ajax就可以使用异步加载。推荐使用jquery实现异步加载。使用原生js开发速度会下降很多。
这边有一篇使用jq实现异步加载后台数据。
http://www.daimatree.com/tag_jq/tag_jq_ajax.php本回答被提问者采纳
如何检查是否已加载Javascript脚本异步（Async）或async属性存在？
我想知道是否存在一种方便的方法来检查脚本（执行时）是否异步加载。
例如。脚本标签：
<script async type="text/javascript" src="js/async.js"></script>
脚本async.js：
if (_condition_to_check_if_this_has_been_loaded_async) { console.log("async: true") }
答案
除非你想要IE兼容性，否则这个问题的正确答案是使用鲜为人知但广泛支持的document.currentScript属性。
此属性返回当前正在执行的脚本的HTMLScriptElement（如果脚本不在标记中，则没有任何内容/回调或类似），它会告诉您它是否具有async / defer属性等。
MDN示例甚至引用了这个确切的用例：
if (document.currentScript.async) {
console.log("Executing asynchronously");
} else {
console.log("Executing synchronously");
}
另一答案
您可以尝试测试是否加载了文档源：
if (document.readyState == "complete" || document.readyState == "loaded") {
// script was fired async
} else {
// script was sync
}
它可能会起作用，因为如果同步触发脚本，那么document.readyState在执行时将不会是complete或loaded
但是，如果您的脚本很小，那么它可能会在整个页面被解析之前加载，因此它不是一个理想的解决方案，但在我看来值得一提
另一答案
jQuery的：
您可以使用jQuery选择页面中的所有script元素，然后检查它们的src属性是否与您要查找的属性相匹配。下面的示例包含对您的脚本（已加载）和另一个（未加载）的检查，以显示两种情况下的结果：
var len = $('script').filter(function () {
return ($(this).attr('src') == 'js/async.js');
}).length;
if (len === 0) console.log('async not found');
else console.log('async found');
var len = $('script').filter(function () {
return ($(this).attr('src') == 'js/foobar.js');
}).length;
if (len === 0) console.log('foobar not found');
else console.log('foobar found');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async type="text/javascript" src="js/async.js"></script>以上是关于javascript脚本如何异步加载，有啥作用的主要内容，如果未能解决你的问题，请参考以下文章