Web應用程序性能優化學習筆記

Web應用程序性能優化學習筆記

一、 使用瀑布圖初步診斷網站性能瓶頸

通常來講，打開一個網頁的速度會受到如下幾項的影響：

1） 服務器花了太長的時間將.aspx頁面的內容轉化爲html。

2） .aspx頁面花了太長的時間從服務器端將內容發送到客戶端。

3） 頁面上的圖片或者flash文件花了太長的時間從服務器端發送到客戶端。

4） JavaScript和CSS文件阻塞頁面渲染。

咱們可使用「瀑布圖」來肯定一個頁面的性能問題是因爲哪一項形成的。FireBug、Chrome自帶的「開發人員工具」均可以生成「瀑布圖」。FireBug與Chrome （9.0或以上版本）經過「網絡（Network）」選項卡查看「瀑布圖」。下面是經過FireFox訪問新浪微博」我關注的人」，FireBug生成的瀑布圖。

圖1 瀑布圖

圖中每一行表示一個Http請求，每個請求都有一條時間線，用於表示這個請求所花費的時間。若是將鼠標放到某一條時間線上，能夠看到如下信息：

圖2 時間線

u       域名解析：搜索DNS服務器並解析域名爲IP地址所花費的時間，這裏是0ms。

u       創建鏈接：客戶端經過IP地址與Web服務器創建鏈接所花費的時間,這裏是562ms。

u       發送請求：客戶端向Web服務器發送請求所花費的時間，這裏是0ms。

u       等待響應：服務器從接收到Http請求到開始向客戶端發送內容所花費的時間，這裏是391ms。這段時間一般包括數據庫查詢、aspx頁面內容轉換爲html等等操做。

u       接收數據：服務器的響應內容所有發送到客戶端所花費的時間，這裏是94ms。

 

有了這些信息，咱們就能初步診斷網站的性能瓶頸。

1）首先看一下哪一個請求花費的時間比較長，看看這個請求的時間線信息，肯定是服務器響應慢了仍是網絡的問題。

2）若是每一個請求所花費的時間都沒有明顯高於其餘，那麼就看一下是否是頁面的Http請求總數太多了。由於瀏覽器對單個域名的併發鏈接數是有限制的，須要處理完一批請求再發送另外一批請求。假設頁面有100個請求，每一個請求花費1s，瀏覽器最大併發數限制爲10個，那麼處理完所爲請求就須要100/10*1s=10s的時間。

關於最大併發數，Http1.1的標準是2，而目前主流的瀏覽器IE、FireFox、Chrome爲了提升速度，分別修改成十、六、6（根據具體版本可能有所變化）。

二、 各類性能瓶頸及其對策

前端性能問題

雅虎專門研究網頁性能問題的工程師發現，一個頁面從請求到加載完，80%的時間都花在前端上（http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/）。事實也是如此，以圖一爲例，整個頁面徹底加載完花費了12s的時間，而服務器的響應時間只有391ms，其餘時間都花在獲取頁面靜態文件（如JS、CSS、圖片等文件）上了。因此優化一個網站首先應從前端性能優化下手。

對策1：使用多域名增長最大併發數

仔細分析圖一中的「域」，能夠發現「tp1.sinaimg.cn」、「tp3.sinaimg.cn」這樣的域名。這樣作能夠成倍的增長併發數。由於瀏覽器只對單個域名限制併發數，而不對單個IP限制併發數，因此可將一個IP地址映射到多個域名，而後使用這些域名訪問網站資源，這樣本來瀏覽器的併發數爲6，使用兩個域名併發數就能夠達到12個了。但須要注意的是，域名並非越多就越好的，由於域名解析也須要花費時間，並且併發數太多也會耗費客戶端太多的CPU，域名數量到了必定程度，網頁性能就會開始降低，因此在應用中須要根據實際狀況尋找一個平衡點。若是不是特別須要，通常2到4個爲佳。

對策2：經過文件壓縮等方式下降單個文件的大小

對於JS文件，能夠經過工具對其進行壓縮，去除沒必要要的空格、換行符等。對於圖片文件，優先考慮使用CSS來代替，實在不行能夠考慮對圖片進行裁剪。對於頁面文件，儘量使用Html標籤而不使用服務器控件以減小ViewState長度，將內聯的javascript和CSS放到單獨的文件中，儘量使用長度較小的字符串來做爲控件ID值。

對策3：合併JS和CSS文件減小併發數

若是將兩個JS文件合併不至於對項目維護形成影響，那麼最好將它們合併。

對策4：使用圖片延遲加載技術減小併發數

所謂圖片延遲加載，就是每次只加載當前屏幕可見區域的圖片，其他的圖片在用戶滾動頁面到該位置後纔開始加載。這是一項很是實用的技術，減小了併發數，不但減小了服務器的壓力，也下降了頁面的加載時間，目前不少門戶網站都使用了該技術，如騰訊微博的「看看推薦的人」頁面，在該頁面上有幾千個頭像，若是一次性加載所有的圖片，就要耗費比較多的客戶端和服務器端的資源。該功能的實現原理很簡單，就是將頁面上的src替換成其餘標記（如original），在頁面滾動到相應位置後，再將original更改成src。目前有個Jquery插件Jquery.LazyLoad.js能夠實現圖片的延遲加載，使用方法以下所示：

 

1 jQuery(document).ready(
2 function($){
3 $("img").lazyload({
4      placeholder : grey.gif //代替原圖片
5      effect      : "fadeIn"
6 });
7 });

 

不過該插件並無真正的減小圖片延遲加載，由於執行js是在頁面的page_load以後，因此實際上打開頁面後，圖片已經所有下載到客戶端，只是由於src屬性被替換成original而沒有顯示起來。針對這種狀況，網上有人提供瞭解決方案：將aspx頁面上的src替換成original，這樣保證page_load時絕對不會請求圖片文件，而後Jquery.LazyLoad.js文件第62行的代碼$(self).attr("original", $(self).attr("src"));修改成$(self).attr("original", $(self).attr("original"));

服務器端性能問題

影響服務器端的性能是多方面的，包括軟件架構、服務器硬件配置等等各方面，若是編碼的時候多注意一下，也可以給性能提高帶來幫助。下面僅摘取幾條記錄以下：

1） 儘可能使用List而不使用DataSet。

2） 使用<%# ((MyClass)Container.DataItem).field1 %>替代<%# Eval("field1")%>，由於Eval需經過反射識別field的類型，再進行數據轉換，從而影響效率。

3） 涉及到字符串鏈接，使用StringBuilder類型，可是若是字符串鏈接操做發生在一個語句上，則不要使用StringBuilder。如：s = s1 + s2 + s3 + s4。

本文來自：http://www.cnblogs.com/bestzrz/archive/2011/04/03/2004416.html