了解常見的網站性能優化技巧
首先我們要學一些優化網站性能和體驗的理論和基礎知識，雅虎已經幫我們總結好了，詳見參考連結中的幾篇文章，有好心人已經給翻譯成中文了。這裡面提到的一些技巧可操作性都很強，建議每一個網站開發人員都仔細學習并進行實踐，可以說不了解這裡面說的優化技巧，提升網站前端性能就無從談起。
診斷網站性能
要想優化網站的前端性能，首先要檢視最影響前端性能的瓶頸是哪些？最常用的工具就是Google的Page Sped和Yahoo的YSlow，這兩個工具都是在Firefox下使用的，并且是基于FireBug的，FireBug是前端開發人員必備的一個插件了。這兩個工具可以幫你診斷你的頁面的性能瓶頸在哪裡，比如打開你的站點首頁共消耗了多少網絡流量，進行了多少次HTTP請求，每個頁面元件是否可以進行緩存，頁面加載的各個執行過程各占用了多少時間，加載中是否有阻塞情況，頁面元件并行加載情況如何，圖檔是否還可以進行無損壓縮，腳本和樣式放置的位置是否合理，是否删除了不必要的空白，是否進行了gzip的壓縮等等。知道了這些資訊，你就可以有針對性的進行網站性能優化，先把最影響性能的地方優化掉。
這兩個工具使用起來也很簡單，詳見參考連結中的兩篇文章。
進行優化實踐
根據我對網站優化的學習和實踐，總結出來一些經驗：一般網站性能消耗都集中在網絡下載下傳上，包括頁面本身的HTML以及圖檔，腳本，樣式等元件的下載下傳，尤其是在網速比較慢的時候，下載下傳這些東西要花費整個網頁呈現的大部分時間，這些東西下載下傳完成後，本地的渲染和展現一般會很快，除非有很複雜的效果或腳本，而服務端執行的快慢要看具體伺服器的邏輯，優化起來複雜度較高，往往站點本身還要通路後端的其它伺服器，資料庫等。
解決這個首先有兩點可以入手，一是對頁面元件進行壓縮，web用的圖檔一般本身就是壓縮格式，是以壓縮空間不太大，還會額外占用伺服器CPU，但腳本，樣式，HTML這些文本内容用GZIP壓縮的壓縮比就非常大了，而且現在大多數浏覽器都支援GZIP壓縮。另一方面是對腳本，樣式，圖檔加Http Expire頭，加上這個過期頭，網站隻需要第一次打開時需要下載下傳這些網頁元件，之後再打開甚至連HTTP請求都不用發起，直接在本地加載了，當然腳本和樣式服務端有可能以後還會變化，我們需要利用URL重寫進行腳本和樣式引用的自動改名，以便在腳本和頁面更新後重新整理利覽器緩存。
可喜的是要做到這兩點，在IIS7裡非常簡單，首先說壓縮，在win7裡利用“打開或關閉windows功能”裡打開IIS性能工具裡的“動态内容壓縮”和“靜态内容壓縮”，如圖1。
然後在IIS管理器裡，選中要壓縮的網站，輕按兩下壓縮按鈕把動态壓縮和靜态壓縮的勾加上就行了，預設會對mimetype為text/*和application/x-javascript進行壓縮，一般這就夠用了，但IIS7預設對.js檔案使用application/x-javascript的mimetype，而預設對application/x-javascript進行的是動态壓縮，動态壓縮和靜态壓縮的差別就是不會被IIS的緩存機制緩存，每次通路都會去讀取檔案或路由請求到後面的子產品，是以我們要把.js的mimetype改成application/javascript，如圖2
然後對application/x-javascript進行動态壓縮，對application/javascript進行靜态壓縮，需要配置C：\Windows\System32\inetsrv\config\applicationHost.config，如下圖3
對頁面元件進行了壓縮有已經減少了不少網絡流量，提升了很大的性能，但是一些腳本和樣式一般情況下很少改變，每次通路網頁都要重新下載下傳還是會消耗不少網絡流量，這就需要配置靜态檔案的過期時間了。
IIS7的管理器裡有個HTTP響應标頭的功能，一般網站的腳本、樣式和圖檔分别放在scripts，styles，images目錄下，我們直接為這幾個目錄下的檔案設定過期時間為100天就可以了，在IIS7的管理器裡直接可以進行操作，具體見參考連結，就不重複了，設定成功後會在這3個子目錄裡分别生成一個web.config檔案，并設定cacheControlMode=UseMaxAge，cacheControlMaxAge=100.00:00:00這樣設定以後優化效果就很好了，第一次打開網頁後，再次打開網頁要比以前快好多倍，但是有一個問題就是如果你的樣式或腳本修改後，如果用戶端不重新整理頁面，就不會生效了。解決這個問題利用URL Rewrite把樣式，腳本的引用路徑加一個時間戳，如果腳本改動了後，時間戳就改動了，引用的檔案名就變了，浏覽器就會下載下傳新的樣式了，而新的樣式實際上經過url rewrite後還是以前的名字，比如/scripts/base.201001111502.js實際上就是/scripts/base.js，具體操作見參考文章。
但文章裡說的是iis6.0用的是URLRewrite元件，在IIS7裡有一個免費的rewrite子產品，在微軟網站下載下傳下來安裝上就行了，它的配置規則和URLRewrite不太一樣，最重要的差別就是對正則分組比對不是用$1，$2引用，而是用{R:1}這種格式引用，還有就是目标url的配置不需要正則轉義符，比如“。”就是“。”，不需要是“\。”，如果不注意這個就等着404吧，具體IIS7.5下的重寫子產品使用和注意事項可看後面的參考連結，我這裡的配置如下
| {{{ <rewrite> <rules> <rule name="static_file_auto_version"> <match url="^(scripts|styles|images)/(.*?)\.[0-9]+\.(css|js|gif|png|jpg)" /> <action type="Rewrite" url="{R:1}/{R:2}.{R:3}" /> </rule> </rules> </rewrite> }}} |