快捷導(dǎo)航

無阻塞加載腳本分析[全]

更新時間：2011年01月20日 22:49:37 作者：

script標(biāo)簽的阻塞行為會對頁面性能產(chǎn)生負(fù)面影響，大多數(shù)瀏覽器在下載或執(zhí)行腳本的同時，會阻塞下載位于它之后的資源，也會阻塞渲染位于它之后的元素。

由于瀏覽器是單線程的，因此腳本在載的時候會阻塞下載其它資源；雖然在現(xiàn)在瀏覽器已經(jīng)有所改善，但仍然有待改進(jìn)。
很顯然，腳本必須按順序執(zhí)行，但沒有必要按順序下載，解決方法：
1。內(nèi)嵌JS
通常由于頁面大小和緩存能帶來更多好處，因此外部文件引入JS更好一些；
在少數(shù)情況下，比如首頁、少量JS情況下尚可接受。
2。XHR Eval
通過XMLHttpRequest從服務(wù)器端獲取腳本。
主要缺陷是，通過XHR獲取的腳本必須部署在和主頁面相同的域中。

復(fù)制代碼代碼如下:

 
Ajax.get("test.js", function (xhr) { 
eval(xhr.responseText); 
}); 

3。XHR注入
使用XHR獲取腳本并創(chuàng)建script標(biāo)簽。
同樣，通過XHR獲取的腳本必須部署在和主頁面相同的域中。

復(fù)制代碼代碼如下:

 
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本身的開銷比較大，另外瀏覽器安全機(jī)制不允許iframe中的js訪問跨域的父頁面，反之亦然。
5。Script DOM Element
JS動態(tài)創(chuàng)建script DOM元素并設(shè)置其src屬性。

復(fù)制代碼代碼如下:

 
var scriptElem = document.createElement('script'); 
scriptElem.src = 'http://domain.com/test.js'; 
document.ge('head')[0].appendChild(scriptElem); 

6。Script Defer
給script標(biāo)簽添加defer屬性。
缺點是只有IE和一些新瀏覽器支持。

復(fù)制代碼代碼如下:

7。document.write Script Tag
使用document.write把HTML標(biāo)簽script寫入頁面。
缺點是只有在IE中是并行加載腳本的。

復(fù)制代碼代碼如下:

document.write("<script type='text/javascript' src='test.js'><\/script>");

有一個大家不曾廣泛討論的不同點是對于瀏覽器忙碌狀態(tài)的影響，包括瀏覽器的狀態(tài)欄、進(jìn)度條、Tab圖標(biāo)以及鼠標(biāo)。
當(dāng)你加載多個彼此間有依賴關(guān)系的腳本時，還需要一種能夠保證執(zhí)行順序的技術(shù)。

技術(shù)	并行下載	可以跨域	存在Script標(biāo)簽	忙碌指示	順序保證	大小 (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

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

您可能感興趣的文章: