异步加载JS脚本

异步处理外部脚本总结

Dynamic Script Element

通常我们加载JS脚本会在HTML里：

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

这属于静态脚本元素，浏览器执行到这里发现script元素，会按上面所说的，下载解析执行脚本，同时阻塞其他资源文件的下载。而动态脚本元素如下：
var script = document.createElement('script'); //创建script标签
script.type = "text/javascript"; script.src = "A.js";
document.getElementsByTagName('head')[0].appendChild(script); //塞进页面
先用document.createElement(‘script’)生成一个script标签，再设置它的src属性，最后将其插入到中。

script标签被插入到页面的DOM树后，就会开始下载src属性指定的脚本。而且通过动态脚本元素下载脚本是异步的，不会阻塞页面的其他下载和处理过程，因此script标签插入中也没问题。

当JS下载完毕后，就会立即执行。如果多个JS间有依赖关系，一下载完马上执行可能会出现error。因此通常来说你应该将有依赖关系的JS合并成一个文件，虽然合并后JS文件会变大，但由于是异步下载，你几乎不会有什么损失。

如果实在不方便将有依赖关系的文件合并。你需要自己指定先后顺序，通过监听load事件(IE是onreadystatechange)来确保依次加载脚本：

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          
         script.onload = function(){  
          callback();        
         };  
       }      
      script.src = url;      
     document.getElementsByTagName("head")[0].appendChild(script); 
} 
//严格确保A->B->C，依次下载脚本文件 
loadScript("A-delay.js", function(){    
      loadScript("B-delay.js", function(){         
             loadScript("C-delay.js", function(){             
                   console.log("All files are loaded!");         
              });   
     });
});    
该技术不但简单，而且通用，且可以跨域，应该成为你的首选。