javascript異步加載方式方法及思考

有沒有發現，很多網站加載前都有一段時間是空白的，（或加了一個加載的gif動畫）。
自己也知道是一些資源的加載問題，今天就這問題，對javascript的加載方式進行一些總結（個人觀點，有錯勿噴，歡迎糾正！）

瀏覽器默認的加載方式是同步的（即阻塞式），如：

<span style="font-size:18px;"><script src="a.js"></script> 
<script src="b.js"></script>
<script src="c.js"></script></span>

它是先依次加載3個js文件後，在加載body裏的內容，如果js較多，期間就會有一段時間白屏。

解決方法：

1.js文件放在</body>前（都懂的）

2.加上defer屬性. （效果與1.相同）如：

<span style="font-size:18px;"><script src="a.js" defer="defer"></script> </span>

  3.加上async屬性

<span style="font-size:18px;"><script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script></span>

<span style="font-size:18px;"><script src="c.js" async ="async"></script></span>

這個方法實現了異步加載，但有問題。3個js與後面body裏的內容同時加載，但其加載順序不保證，（如果b依賴a,就可能出錯）。
一般用於獨立的js(如廣告)。

4.動態創建script（既保證了異步，又能解決順序問題）

<span style="font-size:18px;">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: Firefox, Safari, Chrome, and Opera 
 		script.onload = function(){ 
			 callback(); 
		 }; 
       } 
 	script.src = url; 
	document.body.appendChild(script); 
	};</span>

注：以上代碼參考自一個自己感覺比較好的blog：http://www.jb51.net/article/34491.htm

5.Labjs庫（http://labjs.com/）

      <span style="font-size:18px;">例1：
             $LAB.script("script1.js")
            .script("script2.js")
            .script("script3.js")
            .wait(function(){		// 等待所有script加載完再執行這個代碼塊
                script1Func();
                script2Func();
                script3Func();
    		});</span>

<span style="font-size:18px;">       例2：
             $LAB.script("script1.js","script2.js","script3.js")
            .wait(function(){		// 等待所有script加載完再執行這個代碼塊
                script1Func();
                script2Func();
                script3Func();
            });</span></span>

<span style="font-size:18px;">      例3：
             $LAB.script("script1.js")
            .wait()    			// 空的wait()只是確保script1在其他代碼之前被執行
            .script("script2.js")       // script2 和 script3 依賴於 script1
            .script("script3.js")
            .wait()   			// 但是script2 和 script3 並不互相依賴,可以並行下載
            .script("script4.js")       
           //script4 依賴於 script1, script2 及 script3 .wait(function(){script4Func();});</span>

推薦方法4和5

當然還有很多方法（如:XHR Eval 、XHR Injection 、Script in Iframe ），這裏不一一列舉了。

個人觀點，歡迎補充、糾正^_^！