無阻塞載入指令碼分析[全]

由於瀏覽器是單線程的，因此指令碼在載的時候會阻塞下載其它資源；雖然在現在瀏覽器已經有所改善，但仍然有待改進。
很顯然，指令碼必須按順序執行，但沒有必要按順序下載，解決方案：
1。內嵌JS
通常由於頁面大小和緩衝能帶來更多好處，因此外部檔案引入JS更好一些；
在少數情況下，比如首頁、少量JS情況下尚可接受。
2。XHR Eval
通過XMLHttpRequest從伺服器端擷取指令碼。
主要缺陷是，通過XHR擷取的指令碼必須部署在和首頁面相同的域中。 複製代碼 代碼如下:Ajax.get("test.js", function (xhr) {
eval(xhr.responseText);
});

3。XHR注入
使用XHR擷取指令碼並建立script標籤。
同樣，通過XHR擷取的指令碼必須部署在和首頁面相同的域中。 複製代碼 代碼如下:Ajax.get('test.js', function (xhr) {
injectscript(xhr.responseText);
});
function injectscript(scriptText) {
var s = document.createElement('script');
s.text = scriptText;
document.getElementsByTagName('head')[0].appendChild(s);
}

4。Script in Iframe
將需要的指令碼放入到一個頁面中，然後通過iframe來載入該頁面。
缺點是iframe本身的開銷比較大，另外瀏覽器安全機制不允許iframe中的js訪問跨域的父頁面，反之亦然。
5。Script DOM Element
JS動態建立script DOM元素並設定其src屬性。 複製代碼 代碼如下:var scriptElem = document.createElement('script');
scriptElem.src = 'http://domain.com/test.js';
document.ge('head')[0].appendChild(scriptElem);

6。Script Defer
給script標籤添加defer屬性。
缺點是只有IE和一些新瀏覽器支援。 複製代碼 代碼如下:<script defer src='test.js'></script>

7。document.write Script Tag
使用document.write把HTML標籤script寫入頁面。
缺點是只有在IE中是並行載入指令碼的。 複製代碼 代碼如下:document.write("<script type='text/javascript' src='test.js'><\/script>");

有一個大家不曾廣泛討論的不同點是對於瀏覽器忙碌狀態的影響，包括瀏覽器的狀態列、進度條、Tab表徵圖以及滑鼠。
當你載入多個彼此間有依賴關係的指令碼時，還需要一種能夠保證執行順序的技術。

技術	並行下載	可以跨域	存在Script標籤	忙碌指示	順序保證	大小 (bytes)
XHR Eval	IE, FF, Saf, Chr, Op	no	no	Saf, Chr	-	~500
XHR Injection	IE, FF, Saf, Chr, Op	no	yes	Saf, Chr	-	~500
Script in Iframe	IE, FF, Saf, Chr, Op	no	no	IE, FF, Saf, Chr	-	~50
Script DOM Element	IE, FF, Saf, Chr, Op	yes	yes	FF, Saf, Chr	FF, Op	~200
Script Defer	IE, Saf4, Chr2, FF3.1	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~50
document.write Script Tag	IE, Saf4, Chr2, Op	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~100

在大多數情況下，Script DOM Element是一個好的選擇。這種方式適用於所有的瀏覽器，而且沒有跨域的限制，實現起來也非常的簡單和易於理解。唯一的缺點是不能保證各個指令碼的執行順序。如果需要載入多個有依賴關係的指令碼，應該將這些指令碼拼成一個來保證其按需要的順序執行，或者使用別的技術。
目前非同步載入時保持執行順序的方法有下面幾種，由於篇幅原因，暫不詳細描述。
單個指令碼
1、Hardcoded Callback
2、Window Onload
3、Timer
4、Script Onload
5、Degrading Script Tags
多個指令碼
1、Managed XHR
2、DOM Element and Doc Write
本文參考《高效能網站建設進階指南》