安裝步驟：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分析報告

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

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

性能優(yōu)化技巧

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

使用gzip壓縮

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

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

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

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

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

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

gzip壓縮檢查

最小化JS和圖片

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

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

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

JavaScript最小化

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

關于圖片優(yōu)化，操作方法同上。

啟用瀏覽器緩存

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

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

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

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

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

JavaScript延遲加載

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

文件拼接

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

Google Sprite

其它

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

結論

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

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

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

標簽： 前端性能優(yōu)化 PageSpeed Firebug 

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。