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="http://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等。
