本文以
http://www.bt285.cn 網站為例，為剛做完第一階段的性能優化作一個總結，希望能給大家拋磚引玉。
我的這個網站剛上線不久，因為時間比較倉促，所以先發布，再來優化性能。經過優化后從數據看是非常明顯的，不過你訪問的時候可能還是比較慢，因為目前我的服務器帶寬只有電信2M獨享，呵呵，見笑了吧！窮，沒辦法。這個網站主要以分享圖片為主題，功能比較簡單。將來也不會做的復雜，因為你從名字中就可以看出 eaful , easy is beautiful. 呵呵。
我的性能優化分兩個階段實現：
第一階段：前臺性能優化
主要指減小頁面輸出流，完善客戶端cache策略。
第二階段：后臺性能優化
主要包括數據庫優化，cache優化，算法優化和Page Stream Cache。
目前完成了第一階段，第二階段估計在10月國慶節完成。下面詳細介紹第一階段的性能優化。
1）為靜態文件獨立域名
因為我的網站主要是圖片，每張圖片就有50－60K，以后訪問量大的時候會獨立一臺圖片服務器，以減輕應用服務器的壓力，所以為靜態文件的URL獨立一個二級域名(bt.bt285.cn)，為什么不獨立一個頂級域名，因為考慮到cookie共享等因素，比如有些圖片必須登陸后訪問。
2）優化客戶端cache
比如一些靜態文件，如圖片，css文件，js文件等不用每次都更新，所以使用永久cache。方法是在response頭中設置Cache-Control 為max-age=99999999，大概緩存3年左右吧。如果css文件修改了怎么辦呢，所以這里的關鍵點是在URL中放入版本參數。如：
http://www.bt285.cn/content.php?id=1196863 v1222319367387其中v1222319367387是版本信息，當文件修改后，就修改這個版本號輸出鏈接。這樣瀏覽器發現這是一個新URL，所以會重新請求。
這里要注意的是只對有含有版本號的URL緩存，否則一旦客戶端永久cache你就不能讓他何時更新了。如更改了js文件，客戶端沒有更新，這樣可能報錯了你也不知道。
對圖片的鏈接，就算不包含版本號，也至少讓他緩存到凌晨過期(使用Expires頭)。這樣不會每次刷新頁面都更新圖片。而且就算圖片有修改，最多也是晚一天看到罷了。
3）合并css，js文件
我本來有3個css文件，5個js文件。首次打開的時候要請求8次，雖然現代瀏覽器支持長連接，但還是沒有放到一個文件中快，只要下載一次就夠了。我把css文件合并為一個，js文件合并為一個，效果很明顯。我這里使用的合并不是發布期手工合并,而是運行期根據配置合并,在應用啟動時合并載入在內存中。
謝謝quake wang的提醒：把css中的小圖片合成一張大圖片，然后在css中調節顯示位置。但這里需要注意的是修改圖片時，要保持原圖片的位置不變，并且不影響其他圖片的位置。我目前的做法是給每個小圖片一定的空余空間，如一個30*30px的圖片，我給它在大圖中的空間是50×50px，這樣的話以后這個圖片需要變大的話，不會影響右邊和下邊的圖片了。如果超過50×50px,就給它100×100px,反正是某個整數的倍數，這樣便于在css中調節顯示位置。
4）壓縮文本輸出
css文件，js文件，html文件都是文本輸出，都可以用gzip壓縮，而且有立竿見影的效果。我的200K的js文件壓縮后只有49K了，還是很滿意的。也可以考慮在壓縮前用ShrinkSafe先瘦身，它可以把注釋去掉，縮短變量名的方法減小js文件，以我200K的js文件為例，瘦身后只有 100K了，但是用gzip壓縮，只能壓到39K，感覺效果不是很明顯，而且據說有eval的bug，所以我這里沒有采用。還可以考慮對css文件， html文件進行瘦身，比如刪除兩邊的空格，回車等，但我覺的使用了gzip壓縮，刪除和不刪除空格，壓縮效果應該不會相差太大，所以也沒有采用。
以下是我在firefox中使用firebug測試性能的截圖，優化前和優化后的效果比較。
優化前：
優化后：
以上是firfox首次打開http://www.bt285.cn/content.php?id=1196863的截圖，整整提高了1秒多。第二次打開就更快了，幾乎所有東西靜態文件都在客戶端有緩存。
也可以使用
http://www.bt285.cn/1196863/pic/ 甜性澀愛 來分析頁面下載性能。
優化前：
Object Size Totals
Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
HTML: 46442 9.46 0.45
HTML Images: 10354 2.46 0.45
CSS Images: 19620 6.31 2.50
Total Images: 29974 8.77 2.95
Javascript: 186931 38.66 2.39
CSS: 16635 4.12 0.89
Multimedia: 0 0.00 0.00
Other: 0 0.00 0.00
優化后：
Object Size Totals
Object type Size (bytes) Download @ 56K (seconds) Download @ T1 (seconds)
HTML: 45412 9.25 0.44
HTML Images: 10354 2.46 0.45
CSS Images: 0 0.00 0.00
Total Images: 10354 2.46 0.45
Javascript: 47708 9.71 0.45
CSS: 4028 1.00 0.22
Multimedia: 0 0.00 0.00
Other: 0 0.00 0.00
優化前和優化后的效果還是很明顯的，但是js文件中使用了prototype.js這個js文件，有126K，以后有時間的話會把這個文件替換掉。