|
原文鏈接：http://www.cnblogs.com/yslow/archive/2009/04/28/1445597.html
英文原文地址【翻譯：基調(diào)網(wǎng)絡(luò)性能分析工程師zhenzh】
? 隨著越來越多的網(wǎng)站涉及“Web 2.0”應(yīng)用, JavaScript腳本的數(shù)量也急劇增加. 這是令人憂慮的，因為腳本對頁面性能有負面影響. 主流的瀏覽器(例如IE 6 、7)會以下面2種方式發(fā)生阻塞:
這個 腳本阻塞下載的例子(Scripts Block Downloads example) 展示了上面的情況. 它包括2個外部腳本，后面是1個圖片、1個樣式表和1個iframe. 使用IE7加載這個例子的HTTP瀑布圖顯示了第一個腳本阻塞了所有的下載, 隨后第2個腳本阻塞了所有的下載，最后圖片樣式表和iframe并行加載. 觀察頁面的渲染情況,你會發(fā)現(xiàn)腳本上方的那段文字會馬上渲染。然而，HTML 文檔其它部分的文字會被阻塞，直到所有的腳本被下載完畢。  在 IE6 7, Firefox 2 3.0, Safari 3, Chrome 1, Opera 下載和運行javascript均是單線程的 如果瀏覽器是單線程的,那么當(dāng)一個腳本在執(zhí)行時，瀏覽器不能下載其它資源是可以理解的. 但是沒有理由解釋當(dāng)腳本下載時瀏覽器不能下載其它資源。下載腳本的同時并行下載其它資源是所有最新瀏覽器的已經(jīng)實現(xiàn)了的功能，包括Internet Explorer 8, Safari 4, Chrome 2. 在IE8中打開腳本阻塞下載的例子(Scripts Block Downloads example)的HTTP瀑布圖展示了腳本確實是并行下載的，樣式表也是并行下載的，然而圖片和iframe仍舊被阻塞了(中間空擋部分是javascript運行時間，大約4秒). Safari 4 和 Chrome 2 的行為也很類似。并行下載改善了一部分，但還沒有達到它能達到的最好的效果.  IE8, Safari 4, Chrome 2下，下載是并行的，但運行仍舊是阻塞的 幸運的是,即使在更老的瀏覽器中，也有使腳本不阻塞其它頁面資源的辦法。不幸的是，這取決于web開發(fā)人員是否愿意承擔(dān)這些繁重的工作。 下面有6種非阻塞式加載腳本的技術(shù):
在Cuzillion你可以看到每個技術(shù)的樣例。 事實證明這些技術(shù)有重要的區(qū)別, 見下面表格. 它們大部分提供并行下載, 有些技術(shù)不能被使用在跨域名的腳本上，有些必須在你已有的腳本基礎(chǔ)上簡單的修改，還有一個未被廣泛討論的是否觸發(fā)瀏覽器的繁忙指示標(biāo)記區(qū)別(狀態(tài)欄，進度條，標(biāo)簽圖標(biāo)和光標(biāo)). 如果你需要加載多個相互依存的腳本，你還需要一個維護執(zhí)行順序的技術(shù).
問題是：哪個是最好的技術(shù)？ 最佳的技術(shù)取決于您的具體情況. 下面這個決策樹可以作為一個指導(dǎo). 它看起來復(fù)雜，其實并不是。只有3個參數(shù)就決定了輸出結(jié)果: 腳本是否在主頁面的同一個域名之下, 是否需要保障執(zhí)行順序, 是否需要觸發(fā)繁忙指示標(biāo)記
最理想的是，這個決策樹的邏輯將體現(xiàn)在流行的HTML模板語言中(PHP, Python, Perl, 等.) 因此WEB開發(fā)人員可以簡單的調(diào)用一個函數(shù)，就能保證他們的腳本使用最佳的技術(shù)來加載腳本。 很多情況下,使用 Script DOM Element是一個不錯的選擇. 它可以在所有瀏覽器下工作，沒有任何跨域限制，代碼上很容易實現(xiàn)，很容易被理解，唯一不足的是并不是在所有瀏覽器下均能保持正確的執(zhí)行順序。如果你有多個腳本并且相互依賴，你需要合并他們或使用其它技術(shù)。如果你在頁面內(nèi)有依賴于外部腳本的內(nèi)聯(lián)腳本，你必須對他們實現(xiàn)同步化，我將這個方法稱為“coupling” 并在 耦合異步腳本中提出一些可以做到這一點的方法. 轉(zhuǎn)載于:https://www.cnblogs.com/yslow/archive/2009/04/28/1445597.html 來源：https://www./content-4-335601.html |
|
|
