高性能JS--载入脚本并执行

一般现代浏览器通过侦听事件获得脚本加载完成时的状态

var script = document.createElement('script');
script.type = 'text/javascript';
//Firefox, Chrome
script.onload = function(){
alert('script loaded!');
};
script.src = 'http://code.jquery.com/jquery-1.4.2.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
ie支持另外一种方式，会触发readystatechange事件

loading:开始下载

complete:所有数据已准备就绪

var script = document.createElement('script');
script.type = 'text/javascript';
//IE
script.onreadystatechange = function(){
    if(script.readyState == 'loaded' || script.readyState == 'complete'){
        script.onreadystatechange = null;
        alert('Script loaded');
    }
}
script.src = 'http://code.jquery.com/jquery-1.4.2.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
兼容方法

/**
* 载入脚本
* @param {String} url 载入的地址
* @param {Function} callback 载入后需执行的函数
*/
function loadScript(url, callback){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  //IE
  if(script.readyState){
      script.onreadystatechange = function(){
          if(script.readyState == 'loaded' || script.readyState == 'complete'){
              script.onreadystatechange = null;
              callback();
          }
      }
  } else { //非IE
      script.onload = function(){
          callback();
      }
  }
  script.src = null;
  document.getElementsByTagName('head')[0].appendChild(script);
}
//example
loadScript('http://code.jquery.com/jquery-1.4.2.min.js', function(){
  alert('File is loaded!');
})
XMLRequest脚本注入

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://code.jquery.com/jquery-1.4.2.min.js', true);
xhr.onreadystatechange = function(){
    if(xhr.readySate == 4){
        if(xhr.status >= 200 && shr.status < 300 || xhr.status == 304){ //200 有效响应; 304 从缓存读取
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
};
xhr.send(null);