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

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

使用Page Speed

其中，Page Speed標(biāo)簽頁包括兩個(gè)功能：Analyze Performance與Show Resources，其中Analyze Performance是Page Speed的核心功能。點(diǎn)擊以后Page Speed開始工作，幾秒鐘以后就會得出一份詳細(xì)的性能分析報(bào)告：

Page Speed分析報(bào)告

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

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

性能優(yōu)化技巧

其實(shí)上圖的每一項(xiàng)都是Page Speed提供的優(yōu)化標(biāo)準(zhǔn)，Page Speed就是按照這一條條標(biāo)準(zhǔn)進(jìn)行分析的。需要拿出來講的包括：

使用gzip壓縮

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

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

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

3.過小的文件（通常小于150個(gè)字節(jié)）不宜進(jìn)行g(shù)zip壓縮，因?yàn)間zip會在文件頭加入相關(guān)信息，對于小文件反而會增加文件的長度；

關(guān)于各服務(wù)器如何啟用gzip，可以參加相關(guān)文檔說明。

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

gzip壓縮檢查

最小化JS和圖片

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

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

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

JavaScript最小化

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

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

啟用瀏覽器緩存

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

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

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

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

關(guān)于各緩存頭部的設(shè)置可以參考各服務(wù)器的相關(guān)文檔。

JavaScript延遲加載

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

文件拼接

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

Google Sprite

其它

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

結(jié)論

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

這個(gè)世界需要豐富的Web應(yīng)用，更加需要高效的Web應(yīng)用。

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

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

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