無阻塞加載js，防止因js加載不了影響頁面顯示

瀏覽器加載靜態資源和js的方式都是線性加載，因此通常狀況能夠將js放到</body>前，防止UI線程的阻塞。

而某些時候咱們既但願js在整個網頁的頭部就加載，又擔憂js阻塞致使網站加載緩慢，就能夠用到無阻塞加載js技術。

Dynamic Script Elements 動態腳本元素

DOM容許咱們使用Javascript動態建立HTML的幾乎全部文檔內容，一個新的<script>元素能夠很是容易的經過標準DOM建立：

var script = document.createElement ("script");  
script.type = "text/javascript";  
script.src = "file1.js";   
document.body.appendChild(script); 

 

新的<script>元素加載file1.js源文件。此文件當元素添加到頁面後馬上開始下載。此技術的重點在於：不管在何處啓動下載，文件的下載和運行都不會阻塞其餘頁面處理過程。

當文件使用動態腳本節點下載時，返回的代碼一般當即執行（除了Firefox和Opera，它們將等待此前的全部動態腳本節點執行完畢）。

大多數狀況下，咱們但願調用一個函數就能夠實現Javascript文件的動態下載。下面的函數封裝實現了標準實現和IE實現：

function loadScript(url, 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 { //Others  
       script.onload = function(){ callback();  
     };   
   }  
   script.src = url;  
   document.getElementsByTagName("head")[0].appendChild(script);   
 }  
 
loadScript("file1.js", function(){  //調用  
    alert("File is loaded!");   
}); 

此函數接受兩個參數：Javascript文件的Url和一個當Javascript接收完成時觸發的回調函數。屬性檢查用於決定監視哪一種事件。最後一步src屬性，並將javascript文件添加到head。

動態腳本加載是非阻塞Javascript下載中最經常使用的模式，由於它能夠跨瀏覽器，並且簡單易用。

 

參考資料：

http://www.cnblogs.com/sharpxiajun/p/4072396.html 《探真無阻塞加載javascript腳本技術，咱們會發現不少意想不到的祕密》

http://developer.51cto.com/art/201410/453722.htm 《高性能Javascript：腳本的無阻塞加載策略》

http://www.cnblogs.com/xyang/archive/2013/03/01/2939178.html 《LAB.js使用》

http://www.cnblogs.com/xyang/archive/2013/03/01/2938941.html 《資源文件的動態加載》