尤其是JavaScript 文件，在下載它時，并行下載實際上是被禁用的，并且還會阻塞頁面的呈現(xiàn)！

關(guān)于JavaScript 的下載

在下載JavaScript 腳本文件時，瀏覽器不會并行啟動其它下載，而是讓JavaScript 腳本文件單獨下載完畢后，再繼續(xù)其它請求。這將對頁面的整體性能是一個很大的問題，解決方案如下：

解決方案1：將JavaScript 腳本內(nèi)聯(lián)在頁面中，即直接將JavaScript 腳本寫在HTML標(biāo)簽中。
優(yōu)點：速度最快。在大型網(wǎng)站的首頁中，可以合理的將JavaScript 腳本的一部分直接內(nèi)聯(lián)在HTML標(biāo)簽中。
缺點：JavaScript 腳本不被單獨緩存，其它頁面不能共享該JavaScript 腳本（不能重用）。

解決方案2：將JavaScript 腳本標(biāo)簽的鏈接（link）放在HTML文件標(biāo)簽的底部。
要求：腳本中不包含document.write() 方法改寫頁面。

解決方案3：使用延遲(Defferred) 腳本。即在link標(biāo)簽中添加defer 屬性表明JS腳本中不包含document.write() 方法。
缺陷：在Firefox 中使用延遲(Defferred ) 腳本后，JavaScript 腳本還是會阻塞呈現(xiàn)、阻塞并行下載。
而在IE中，效果也不明顯。

總結(jié)：如果一個腳本可以使用延遲(Defferred ) 腳本技術(shù)，那么它一定可以移到頁面的底部！
即“解決方案3”完全可以用“解決方案2”替代。

解決方案4：使用加載后下載。即JavaScript 腳本在頁面加載完畢后，通過onload 事件動態(tài)下載。(CSS也通用 )
優(yōu)點：既不阻塞HTML頁面的呈現(xiàn)，又能實現(xiàn)JavaScript 腳本的重用（腳本將被緩存在瀏覽器中）。
缺點：產(chǎn)生額外的JavaScript 代碼用于實現(xiàn)該功能，增加了程序復(fù)雜度。
問題：可能加載兩次（內(nèi)聯(lián)一次，外部加載一次）。

可以使用IFrame嵌套一個頁面并加載JavaScript 腳本來解決。
示例：http://stevesouders.com/hpws/post-onload.php

解決方案5：動態(tài)內(nèi)聯(lián)。根據(jù)cookie做指示器，用代碼進(jìn)行判斷，實現(xiàn)將外部JS內(nèi)聯(lián)到頁面當(dāng)中。
動態(tài)內(nèi)聯(lián)是對“加載后下載”的進(jìn)一步完善。也再次增加了程序復(fù)雜度。
雖然JavaScript 腳本推薦放在頁面底部，但CSS樣式表則應(yīng)該放在頁面的頂部！

關(guān)于JavaScript 的精簡

精簡（Minification）是從代碼中移除不必要的字符、注釋、空白以減小JavaScript 代碼的大小，進(jìn)而改善JavaScript的下載長度和加載速度。

精簡工具：JSMin JS Minifier js壓縮
JSMin 用于去除javascript 文件中所有不必要的字符、注釋、空白。

cmd 使用方法：C:\Documents and Settings\xugang>jsmin <openWin.js> js_rerurn.js
1. 先指定到 jsmin.exe 文件夾
2. openWin.js為源文件
3. js_rerurn.js為目標(biāo)文件

精簡工具：ShrinkSafe（ 原名：Dojo Compressor ） http://dojotoolkit.org/docs/shrinksafe
ShrinkSafe 用于移除javascript 文件中的空白，同時還通過替換的方式縮短了變量名。
cmd 使用方法：java -jar shrinksafe.jar infile.js > outfile.js
shrinksafe.jar是工具名
infile.js為源文件
outfile.js為目標(biāo)文件

注意：在控制臺運(yùn)行時，要保證shrinksafe.jar和js.jar是在同一個目錄，并且輸入的JS源文件和輸出的JS目標(biāo)文件也會在同一個目錄。（默認(rèn)在C盤根目錄）

一般可以對你的JavaScrip文件同時使用JSMin 和 ShrinkSafe 這兩個工具進(jìn)行精簡。
壓縮組件

同時，不要忘記通過HTTP的頭部聲明，壓縮腳本、樣式表和HTML文檔來減少響應(yīng)時間。
瀏覽器客戶端的請求： Accept-Encoding: gzip, deflate
Web服務(wù)器端的響應(yīng)：Content-Encoding: gzip
gzip是目前流行和理想有效壓縮方法，deflate效果略遜且不太流行。

最新評論