DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 無阻塞加載腳本分析[全]
無阻塞加載腳本分析[全]
編輯:關於JavaScript     
由於浏覽器是單線程的,因此腳本在載的時候會阻塞下載其它資源;雖然在現在浏覽器已經有所改善,但仍然有待改進。
很顯然,腳本必須按順序執行,但沒有必要按順序下載,解決方法:
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
本文參考《高性能網站建設進階指南》
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved