共計 2747 個字符，預計需要花費 7 分鐘才能閱讀完成。

安裝步驟：http://jingyan.baidu.com/article/597035523c54cd8fc00740ed.html, 安裝好以后，打開 Firebug，可以看到新增的標簽頁：Page Speed：, 使用 Page Speed,

安裝步驟：http://jingyan.baidu.com/article/597035523c54cd8fc00740ed.html

安裝好以后，打開 Firebug，可以看到新增的標簽頁：Page Speed：

使用 Page Speed

其中，Page Speed 標簽頁包括兩個功能：Analyze Performance 與 Show Resources，其中 Analyze Performance 是 Page Speed 的核心功能。點擊以后 Page Speed 開始工作，幾秒鐘以后就會得出一份詳細的性能分析報告：

Page Speed 分析報告

其中各項按照重要性進行排序，展開每一部分，可以得到詳細的報告。其中，紅色圖標表示未進行優化，黃色表示可以進行進一步優化，綠色表示已經進行優 化。

其余部分的功能可以在 Google Code 的官方主頁上找到，這里就不贅述了，只重點介紹 Analyze Performance 這一功能。

性能優化技巧

其實上圖的每一項都是 Page Speed 提供的優化標準，Page Speed 就是按照這一條條標準進行分析的。需要拿出來講的包括：

使用 gzip 壓縮

這里放在第一，是性能優化效果最顯著的一步。所謂 gzip 壓縮是一種開發的壓縮算法，目前的主流瀏覽器（Firefox，Safari，Chrome，IE4 及以上）與主流服務器（Apache，Lighttpd，Nginx）均對其有很好的支持。gzip 壓縮是通過 HTTP 1.1 協議中的 Content-Encoding：gzip 來進行標記說明，其可以明顯減少文本文件的大小，從而節省帶寬和加載時間。我做過的一個實驗，發現啟用 gzip 后，jquery 1.2.6 minify 版本的大小從 54.4k 減少到 16k，減少了 70%。gzip 適用的情況包括：

1.HTML\CSS\JavaScript 文件，gzip 算法對于文本文件的效率比較高，而 jpg/gif/png/pdf 等二進制文件本身已經進 行了一次壓縮，再使用 gzip 的成效已經不明顯了。而且 gzip 壓縮需要消耗服務器的資源，而解壓縮需要消耗瀏覽器的資源，對于比較大的二進制文件具有非 常高的性能消耗；

2. 盡量使用一種大小寫方式，要么全部大寫，要么全部小寫。學過數據結構和算法的同學一定知道壓縮其本身就是對冗余信息熵進行壓縮，如何數據原素的類 型種類太多，其信息冗余度會降低，從而壓縮率降低；

3. 過小的文件（通常小于 150 個字節）不宜進行 gzip 壓縮，因為 gzip 會在文件頭加入相關信息，對于小文件反而會增加文件的長度；

關于各服務器如何啟用 gzip，可以參加相關文檔說明。

如何檢查 gzip 是否啟用？使用 Firebug，在 Net 模塊中進行檢查 HTTP Header 是否有 Content-Encoding gzip 標記，參見下圖：

gzip 壓縮檢查

最小化 JS 和圖片

對于 JavaScript 文件本身具有非常大的優化空間。所謂 JavaScript 壓縮，就是通過一些工具將函數、變量名進行優化（其實就是盡可能 縮短變量名長度），消除多余字符（比如空格、換行符、注釋等），最終得到的代碼可以在分析和執行上得到性能提升。壓縮后得到的代碼對于機器而言是可讀的，對于人來說就不行了，因為文件內容已經面目全非。所以壓縮一般用于生產期的代碼，不能使用于開發期。

同樣的道理，圖片內容中也有一定的冗余信息，比如文件頭部的一些內容描述（這些內容在 jpg）圖片上尤其如此。通過一定的工具（比如 GIMP）可以 去除這些信息，從而節省一定的空間。

幸運的是，Page Speed 已經內置了這些功能，我們不需要找第三方的工具。如下圖所示，可以看到對 JS 文件進行最小化可以得到的預期效果：

JavaScript 最小化

比如 jquery.form.js，最小化后減少 11.9kb，減少 54.8% 的空間。點擊 minified version，在新窗口中可以看到 Page Speed 為你優化好的版本，直接更新到服務器就可以了。

關于圖片優化，操作方法同上。

啟用瀏覽器緩存

這是經常使用的方法。當請求的資源在瀏覽器本地得到緩存后，第二次請求這些內容就可以從直接緩存中取出，減少了連線的 HTTP 請求。

HTTP 1.1 提供的緩存方法主要有兩種：

1.Expires and Cache-Control：max-age. 即內容在緩存中的生命有效期。第一次請求后，在生命有效期之內的后期請求直接從本地緩存中取，不過問服務器；

2.Last-Modified and ETag. 其中 Last-Modified 標記文件最后一次修改的時間，瀏覽器第二次請求是在頭部加入上次請求緩存下來的 Last-Modified 時間，如何兩次 請求期間服務器的內容沒有進行修改，服務器直接返回 304 Not Modified，瀏覽器接到以后直接使用本地緩存。否則，服務器會返回 200 以及更新后的版本。ETag 是服務器對于文件生成的 Hash 散列，其生成算 法與最后一次修改的時間相關。瀏覽器第二次請求發送上次的 ETag 信息，服務器通過簡單的比對就知道是否應該返回 304 還是 200。

關于各緩存頭部的設置可以參考各服務器的相關文檔。

JavaScript 延遲加載

通常瀏覽器在解析 HTML 時遇到 JS 文件會先下載，解析執行后才會下載后面的內容，期間自然會造成一定的延時。為了提高性能，盡可能將 JS 文件的位 置后移，如果可能，還可以通過部分代碼進行異步加載。另外，對于 JS 和 CSS 在必須放置在一起情況，需要報 JS 放置在 CSS 之后，這樣 CSS 與 JS 文件可 以同步下載。

文件拼接

這里主要包括 JS/CSS 等文本文件和圖片。對于文本文件，盡可能將同一類型放置到一個文件中，減少 HTTP 請求。對于 CSS 背景圖片，可以使用 Sprit 技術將圖片拼接到一起，然后使用 background-position 屬性選擇對應的圖片。Google 首頁上的這個圖片就是一個很好的例 子：

Google Sprite

其它

更多優化規則，可以參考 Page Speed 的說明以及 Steve Souders 個人主頁上的相 關信息。

結論

雖然現在網絡速度越來越快，Web 前端優化仍然非常重要；永遠不要假設用戶的網絡速度 和你一樣快，畢竟由于 ISP 的各方面原因，各地的速度大不相同。良好的策略可以在有限的帶寬資源下達到最大的性能發揮。

這個世界需要豐富的 Web 應用，更加需要高效的 Web 應用。

原文地址：http://www.xincss.com/?p=133

丸趣 TV 網 – 提供最優質的資源集合！