隨著後端最佳化空間越來越小,現在越來越多的網站更注重前端效能的最佳化,就是瀏覽器,http層面的最佳化,這裡寫兩點最簡單最有效 asp.net網站最佳化技巧。
瞭解常見的網站效能最佳化技巧
首先我們要學一些最佳化網站效能和體驗的理論和基礎知識,雅虎已經幫我們總結好了,詳見參考連結中的幾篇文章,有好心人已經給翻譯成中文了。這裡面提到的一些技巧可操作性都很強,建議每一個網站開發人員都仔細學習並進行實踐,可以說不瞭解這裡面說的最佳化技巧,提升網站前端效能就無從談起。
診斷網站效能
要想最佳化網站的前端效能,首先要查看最影響前端效能的瓶頸是哪些?最常用的工具就是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>
}}}
小節
進行了這兩處最佳化後,網站效能已經提升了不少了,接下來再按照雅虎提供的最佳化原則和page speed的提示看看還有哪些是可以比較簡單而有效進行最佳化的。(來源:蛙蛙池塘)