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

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

   

   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);

   

2. 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);

   

3. 兼容方法

   

   /* *
   * 载入脚本
   * @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! ' );
   })

   

4. 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 );