1 问题描述
JS为什么需要异步加载？首先要了解到JS在默认情况下是以同步模式（阻塞模式）加载的，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻塞式的，但是JS的执行总是阻塞的。而对于异步加载（非阻塞加载），浏览器在加载JS的同时，还会继续进行后续页面的处理。接下来，就来看看异步加载是怎么回事吧。
2 问题解决
（1）动态生成script标签
<body>
<p>这是文本</p>
<script type="text/javascript">
(function(){
var s=document.createElement("script");
s.type="text/javascript";
s.src="//china-addthis.googlecode.com/svn/trunk/addthis.js";
document.body.appendChild(s);
})();
</script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
alert("hello world");
</script>
</body>
（2）async属性
async属性规定一旦脚本可用，则会异步执行（一旦下载完毕就会立刻执行）。其仅适用于外部脚本（在使用src属性时适用）。
<body>
<p>这是文本</p>
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' async="async"></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
alert("hello world");
</script>
</body>
（3）defer属性
defer属性规定是否对脚本执行进行延迟，直到页面加载为止。
<body>
<p>这是文本</p>
<script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js' defer="defer"></script>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
alert("hello world");
</script>
</body>
3 其他方法
XHR注入（通过XMLHttpRequest对象来获取JS，然后创建一个script元素插入到DOM结构中）；ajaxeval(使用ajax得到脚本内容，然后通过eval（xmlhttp.responseText）来运行脚本)；iframe等。
END主 编 | 王楠岚
责 编 | wrape
where2go 团队
微信号：算法与编程之美
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
