提高網站效能之 如何對待JavaScript

尤其是JavaScript 檔案，在下載它時，並行下載實際上是被禁用的，並且還會阻塞頁面的呈現！

關於JavaScript 的下載

在下載JavaScript 指令檔時，瀏覽器不會並行啟動其它下載，而是讓JavaScript 指令檔單獨下載完畢後，再繼續其它請求。這將對頁面的整體效能是一個很大的問題，解決方案如下：

解決方案1：將JavaScript 指令碼內聯在頁面中，即直接將JavaScript 指令碼寫在HTML標籤中。
優點：速度最快。在大型網站的首頁中，可以合理的將JavaScript 指令碼的一部分直接內聯在HTML標籤中。
缺點：JavaScript 指令碼不被單獨緩衝，其它頁面不能共用該JavaScript 指令碼（不能重用）。

解決方案2：將JavaScript 指令碼標籤的連結（link）放在HTML檔案標籤的底部。
要求：指令碼中不包含document.write() 方法改寫頁面。

解決方案3：使用延遲(Defferred) 指令碼。即在link標籤中添加defer 屬性工作表明JS指令碼中不包含document.write() 方法。
缺陷：在Firefox 中使用延遲(Defferred ) 指令碼後，JavaScript 指令碼還是會阻塞呈現、阻塞並行下載。
而在IE中，效果也不明顯。

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

解決方案4：使用載入後下載。即JavaScript 指令碼在頁面載入完畢後，通過onload 事件動態下載。(CSS也通用 )
優點：既不阻塞HTML頁面的呈現，又能實現JavaScript 指令碼的重用（指令碼將被緩衝在瀏覽器中）。
缺點：產生額外的JavaScript 代碼用於實現該功能，增加了程式複雜度。
問題：可能載入兩次（內聯一次，外部載入一次）。

可以使用IFrame嵌套一個頁面並載入JavaScript 指令碼來解決。
樣本：http://stevesouders.com/hpws/post-onload.php

解決方案5：動態內聯。根據cookie做指標，用代碼進行判斷，實現將外部JS內聯到頁面當中。
動態內聯是對“載入後下載”的進一步完善。也再次增加了程式複雜度。
雖然JavaScript 指令碼推薦放在頁面底部，但CSS樣式表則應該放在頁面的頂部！

關於JavaScript 的精簡

精簡（Minification）是從代碼中移除不必要的字元、注釋、空白以減小JavaScript 代碼的大小，進而改善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為目標檔案

精簡工具：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為目標檔案

注意：在控制台運行時，要保證shrinksafe.jar和js.jar是在同一個目錄，並且輸入的JS源檔案和輸出的JS目標檔案也會在同一個目錄。（預設在C盤根目錄）

一般可以對你的JavaScrip檔案同時使用JSMin 和 ShrinkSafe 這兩個工具進行精簡。
壓縮組件

同時，不要忘記通過HTTP的頭部聲明，壓縮指令碼、樣式表和HTML文檔來減少回應時間。
瀏覽器用戶端的請求： Accept-Encoding: gzip, deflate
Web伺服器端的響應：Content-Encoding: gzip
gzip是目前流行和理想有效壓縮方法，deflate效果略遜且不太流行。