?

隨著越來越多的網(wǎng)站涉及“Web 2.0”應(yīng)用, JavaScript腳本的數(shù)量也急劇增加. 這是令人憂慮的，因?yàn)槟_本對頁面性能有負(fù)面影響. 主流的瀏覽器(例如IE 6 、7)會(huì)以下面2種方式發(fā)生阻塞:

• 如果資源位于腳本的下方，那么他們會(huì)被阻塞下載.
• 如果元素位于腳本的下方，那么他們會(huì)被阻塞渲染展示.

這個(gè) 腳本阻塞下載的例子(Scripts Block Downloads example) 展示了上面的情況. 它包括2個(gè)外部腳本，后面是1個(gè)圖片、1個(gè)樣式表和1個(gè)iframe. 使用IE7加載這個(gè)例子的HTTP瀑布圖顯示了第一個(gè)腳本阻塞了所有的下載, 隨后第2個(gè)腳本阻塞了所有的下載，最后圖片樣式表和iframe并行加載. 觀察頁面的渲染情況,你會(huì)發(fā)現(xiàn)腳本上方的那段文字會(huì)馬上渲染。然而，HTML 文檔其它部分的文字會(huì)被阻塞，直到所有的腳本被下載完畢。

在 IE6 7, Firefox 2 3.0, Safari 3, Chrome 1, Opera 下載和運(yùn)行javascript均是單線程的

如果瀏覽器是單線程的,那么當(dāng)一個(gè)腳本在執(zhí)行時(shí)，瀏覽器不能下載其它資源是可以理解的. 但是沒有理由解釋當(dāng)腳本下載時(shí)瀏覽器不能下載其它資源。下載腳本的同時(shí)并行下載其它資源是所有最新瀏覽器的已經(jīng)實(shí)現(xiàn)了的功能，包括Internet Explorer 8, Safari 4, Chrome 2. 在IE8中打開腳本阻塞下載的例子(Scripts Block Downloads example)的HTTP瀑布圖展示了腳本確實(shí)是并行下載的，樣式表也是并行下載的，然而圖片和iframe仍舊被阻塞了(中間空擋部分是javascript運(yùn)行時(shí)間，大約4秒). Safari 4 和 Chrome 2 的行為也很類似。并行下載改善了一部分，但還沒有達(dá)到它能達(dá)到的最好的效果.

IE8, Safari 4, Chrome 2下，下載是并行的，但運(yùn)行仍舊是阻塞的

幸運(yùn)的是,即使在更老的瀏覽器中，也有使腳本不阻塞其它頁面資源的辦法。不幸的是，這取決于web開發(fā)人員是否愿意承擔(dān)這些繁重的工作。

下面有6種非阻塞式加載腳本的技術(shù):

• XHR Eval - 通過XHR下載腳本，通過eval()執(zhí)行.
• XHR Injection - 通過XHR下載腳本，通過創(chuàng)建一個(gè)script的DOM元素注入頁面，并且設(shè)置text屬性.
• Script in Iframe - 在一個(gè)HTML頁面內(nèi)包含腳本并通過iframe加載.
• Script DOM Element - 創(chuàng)建一個(gè)script的DOM元素，并且設(shè)置src屬性為腳本的url
• Script Defer - 增加腳本的defer屬性.曾經(jīng)僅在IE中可用，現(xiàn)在Firefox 3.1. 中也可以了
• document.write Script Tag - 在HTML頁面內(nèi)使用document.write <script src=""> . 僅在IE有效.

在Cuzillion你可以看到每個(gè)技術(shù)的樣例。 事實(shí)證明這些技術(shù)有重要的區(qū)別, 見下面表格. 它們大部分提供并行下載, 有些技術(shù)不能被使用在跨域名的腳本上，有些必須在你已有的腳本基礎(chǔ)上簡單的修改，還有一個(gè)未被廣泛討論的是否觸發(fā)瀏覽器的繁忙指示標(biāo)記區(qū)別(狀態(tài)欄，進(jìn)度條，標(biāo)簽圖標(biāo)和光標(biāo)). 如果你需要加載多個(gè)相互依存的腳本，你還需要一個(gè)維護(hù)執(zhí)行順序的技術(shù).

問題是：哪個(gè)是最好的技術(shù)？ 最佳的技術(shù)取決于您的具體情況. 下面這個(gè)決策樹可以作為一個(gè)指導(dǎo). 它看起來復(fù)雜，其實(shí)并不是。只有3個(gè)參數(shù)就決定了輸出結(jié)果: 腳本是否在主頁面的同一個(gè)域名之下, 是否需要保障執(zhí)行順序, 是否需要觸發(fā)繁忙指示標(biāo)記

最理想的是，這個(gè)決策樹的邏輯將體現(xiàn)在流行的HTML模板語言中(PHP, Python, Perl, 等.) 因此WEB開發(fā)人員可以簡單的調(diào)用一個(gè)函數(shù)，就能保證他們的腳本使用最佳的技術(shù)來加載腳本。

很多情況下,使用 Script DOM Element是一個(gè)不錯(cuò)的選擇. 它可以在所有瀏覽器下工作，沒有任何跨域限制，代碼上很容易實(shí)現(xiàn)，很容易被理解，唯一不足的是并不是在所有瀏覽器下均能保持正確的執(zhí)行順序。如果你有多個(gè)腳本并且相互依賴，你需要合并他們或使用其它技術(shù)。如果你在頁面內(nèi)有依賴于外部腳本的內(nèi)聯(lián)腳本，你必須對他們實(shí)現(xiàn)同步化，我將這個(gè)方法稱為“coupling” 并在 耦合異步腳本中提出一些可以做到這一點(diǎn)的方法.

轉(zhuǎn)載于:https://www.cnblogs.com/yslow/archive/2009/04/28/1445597.html