浅谈无阻塞加载脚本方法

无阻塞的脚本是创建响应迅速的web应用的第一步，其秘诀就是在页面加载完成后才加载JS，也就是尽量在window.onload事件触发后再下载脚本。

这里对比几种无阻塞加载脚本的方法

一、延迟的脚本

使用script扩展属性defer，由于只有Internet Explorer 支持 defer 属性，所以基本不建议使用这种方式，使用方法为：

<script defer="defer">

二、XMLHttpRequest脚本注入技术

用XHR来下载JS文件，然后通过创建动态script元素将代码注入页面中：

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
   if(xhr.readyState == 4){
      //动态添加脚本
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.text = xhr.responseText;
      document.body.appendChild(script);
   }
}

优点：

1、下载JS但不立即执行，可以把脚本的执行推迟到想执行的时候

2、浏览器通用代码，都能正常工作

缺点：

1、js文件要和请求页面处于相同的域，因此大型web应用通常不会采用该技术。

2、需要HTTP请求

三、动态脚本加载

可以直接封装为一个JavaScript,这里我直接叫loadScript.js

function loadScript(urlS,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{
          script.onload = function(){
              callback();