异步与延迟加载JavaScript的方法

默认情况JavaScript是同步加载的，也就是JavaScript的加载是阻塞的，后面的元素要等待JavaScript加载完毕后才能进行再加载，有多种无阻赛下载JavaScript的方法。

（1）defer

Defer属性指明本元素所含的脚本不会修改DOM，因此代码能安全地延迟执行。只有 Internet Explorer 支持 defer 属性。

<!DOCTYPE HTML>
<html>
 <head>
 </head>
 <body>
 <script type="text/javascript" defer="defer">
     alert('defer');
 </script>
 <script type="text/javascript">
     alert('script');
 </script>
 <script type="text/javascript">
     window.onload=function()
     {
         alert('load');
     }
 </script>
 </body>
 </html>

不支持defer属性的浏览器的弹出顺序是：“defer”,“script”,“load”。在支持defer属性的浏览器的浏览器上弹出顺序是“script”,“defer”,“load”。带有defer属性的<script>元素是在onlaod事件处理器之前被调用。

（2）async

async的定义和用法(是HTML5的属性) ,async 属性规定一旦脚本可用，则会异步执行。

<script type="text/javascript" src="demo_async.js" async="async"></script>

注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

注释：有多种执行外部脚本的方法：

如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

（3）动态脚本元素

动态创建<script>,插入到DOM中。如果callback依赖该脚本，那么需要确保<script>元素接收完成后再触发callback。FireFox、Opera、Chrome、Safari 3以上版本会在<script>元素接收完成后触发一个load时间，IE会触发readystatechange事件。readyState属性有5中取值：

uninitialized	初始状态
loading	开始下载
loaded	下载完成
interactive	数据完成下载但尚不可用
complete	所有数据已准备完毕

兼容性的写法：

     function loadScript(url, callback)
     {
         var script = document.createElement("script");
         script.type = "text/javascript";
         if (script.readyState){ //IE
             script.onreadystatechange = function(){
                 if (script.readyState == "loaded" || script.readyState == "complete"){
                     script.onreadystatechange = null;
                     callback();
                 }
             };
         } else { //Others: Firefox, Safari, Chrome, and Opera
             script.onload = function(){
                 callback();
             };
         }
         script.src = url;
         document.body.appendChild(script);
     }
     //用法
     loadScript("https://vuejs.org/js/vue.js",function(){
         console.log('ok');
     });

（4）XMLHttpRequest脚本注入

先创建一个XHR对象，然后用它下载JavaScript文件，最后用过创建动态<script>元素将代码注入到页面中。

     var xhr = new XMLHttpRequest();
     xhr.open('get', 'file1.js', true);
     xhr.onreadystatechange = function(){
         if (xhr.readyState == 4){
             if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                 var script = document.createElement ('script');
                 script.type = 'text/javascript'; 
                 script.text = xhr.responseText; 
                 document.body.appendChild(script);
             }
         }
     };
     xhr.send(null);

此代码向服务器发送一个获取file1.js 文件的GET 请求。onreadystatechange 事件处理函数检查readyState是不是4，然后检查HTTP 状态码是不是有效（2XX 表示有效的回应，304 表示一个缓存响应）。如果收到了一个有效的响应，那么就创建一个新的<script>元素，将它的文本属性设置为从服务器接收到的responseText 字符串。这样做实际上会创建一个带有 内联代码的<script>元素。一旦新<script>元素被添加到文档，代码将被执行，并准备使用。

这种方法的主要优点是，你可以下载不立即执行的JavaScript 代码。由于代码返回在<script>标签之外（换句话说不受<script>标签约束），它下载后不会自动执行，这使得你可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。

此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内，不能从CDN下载（Content Delivery Network）。因此，大型网页通常不采用XHR 脚本注入技术。