js怎么動態加載js文件（JavaScript性能優化篇）

下面介紹一種JS代碼優化的一個小技巧，通過動態加載引入js外部文件來提高網頁加載速度

 

1. 【基本優化】

   將所有需要的<script>標簽都放在</body>之前，確保腳本執行之前完成頁面渲染而不會造成頁面堵塞問題，這個大家都懂的。

   
2.  

   【合並JS代碼，盡可能少的使用script標簽】

   最常見的方式就是帶代碼寫入一個js文件中，讓頁面只使用一次<script></script>標簽來引入

   
3.  

   【無堵塞加載JS】

   通過給script標簽增加 defer屬性或者是 async 屬性來實現

   <script src="file.js" defer></script>

   注解：

    

   async和defer不同之處是async加載完成后會自動執行腳本，defer加載完成后需要等待頁面也加載完成才會執行代碼

   
4.  

   【動態創建script來加載-推薦】

   function loadJS( url, callback ){

       var script = document.createElement('script'),

           fn = callback || function(){};

       script.type = 'text/javascript';

       

       //IE

       if(script.readyState){

           script.onreadystatechange = function(){

               if( script.readyState == 'loaded' || script.readyState == 'complete' ){

                   script.onreadystatechange = null;

                   fn();

               }

           };

       }else{

           //其他瀏覽器

           script.onload = function(){

               fn();

           };

       }

       script.src = url;

       document.getElementsByTagName('head')[0].appendChild(script);

   }

    

   //用法

   loadJS('file.js',function(){

       alert(1);

   });

   
5.  

   谷歌瀏覽器運行效果，script被動態創建在head中

   

   
6.  

   建議大家可以封裝成類庫，單獨引入。

   該原理實現的也有很多不錯的js類庫可以使用，如LazyLoad.js，支持數組的形式引入，打開瀏覽器在network中可看到js是同步加載的

   

   
7.  

   【XHR加載】

   使用ajax方式加載

   代碼：

   var xhr = new XMLHttpRequest;

   xhr.open('get','file.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);

8. 8

   【總結】

   最好的方式還是使用動態創建script的方式加載，當動態創建script，瀏覽器會分配一個線程去下載src指向的資源，多個script也是同步下載的