構建高效能ASP.NET網站 第五章—效能調優綜述（中篇）

前言：本篇主要講述用一些簡單的工具來分析一些與網站效能有關的資料，在上一篇文章中，我們討論了一下效能調優的一般過程，本篇就開始介紹一些方法和工具，讓大家快速的入門。

本章的議題如下：

效能調優的一般過程

利用分析工具分析頁面載入資訊

利用分析工具分析效能瓶頸

 

　　利用分析工具分析載入頁面資訊 

         網站的最佳化說到底還是網站每一個頁面的最佳化，即使得網站的頁面更快的呈現在使用者的眼前。所以在此之前，我們首先來看看一個web頁面的組成部分：

         1. Html檔案:在ASP.NET中，Html檔案通常是通過解析.aspx頁面而產生的。而這個解析過程在服務端進行，同時這個過程也消耗了服務端的大部分資源。

         2. 圖片和flash檔案：一個網站往往包含很多這樣的的檔案。

         3. Js和css檔案：這些檔案可以阻止頁面的呈現。

 

　　清楚了頁面的組成部分之後，我們可以把使得頁面載入變慢的因素分為如下幾類：

1.       服務端的花費大量時間解析.aspx，也就是說服務端產生html文本的時間過長（導致這個問題的原因很多，例如資料庫查詢很慢，影響了頁面的產生）。

2.       在服務端和瀏覽器之間，傳遞html文本花費大量的時間（例如，頁面中的Viewstate很大，網路很慢等）。

3.       圖片和flash檔案的載入花費大量的時間。

4.       Js和css的載入花費大量的時間。

 

為了使得一個頁面的載入變快，那麼我們就得知道：是以上哪一個過程影響了速度(本系列的後續文章會詳細講述)。一旦知道了是那類問題導致了效能問題，那麼我們就可以對症下藥。

        

下面我們就通過一些工具來簡單的查看和分析網站的效能，目的讓大家快速的瞭解如何進行簡單的效能分析。

 

我們用瀑布圖來分析頁面的每個組成部分載入所花的時間，例如下面就是部落格園首頁載入的分析圖（部分的）。

 

 

我們可以通過圖中的“時間軸“長短來知道每個檔案載入的時間。時間軸長越長，那麼載入該檔案的時間越長，反之。

 

看完了上面的圖之後，大家應該很想知道：上面的圖是如何產生的，那麼下面就介紹一些產生頁面載入瀑布圖的工具。

 

      我們首先來看看：Firefox+Firebug

         Firefox：http://www.mozilla.com/en-US/firefox/

         Firebug：http://getfirebug.com/

 

　　下面就開始示範如何產生頁面載入的瀑布圖（如果熟悉這個流程的朋友可以跳過此段）

1.       開啟Firefox，然後按下F12,就看到如下的畫面：

 

 

 

2.       在Firebug中，在選擇“網路”下拉框中選擇“啟用”。

        

         OK，下面我們就來詳細的看看在瀑布圖中一些資料和圖示的意義。

 

　　　　1． 請求和響應的相關資訊

在瀑布圖中，點擊每一行的”+”如下：

 

 

 

 

符號展開之後，我們可以看到所有的請求和回應標頭，如下：

 

 2． 時間軸的相關資訊

　　當我們把滑鼠移到著色的時間軸bar上面的時候，我們就可以看到請求該檔案所花的時間的詳細資料，如下：

 

 

　　我們用一個表格來講述每個時間段的含義：

網域名稱解析	尋找請求的檔案所在的伺服器的IP地址所花的時間
建立串連	開啟用戶端到服務端的TCP連結所花的時間
發送請求	瀏覽器發送請求所花的時間。大家可能有點奇怪：為什麼發送請求還要等待，難道不是開啟串連就發送了請求嗎？ 其實瀏覽器會把要請求的檔案的請求放在請求隊列中，隊列的長度一般都是有限制的，如果頁面需要請求的檔案很多，如果隊列達到了最大的限制數量，那麼後續的檔案請求會等待。
等待響應	用戶端發送請求一直到接受服務端的第一個位元組所花的時間
接受資料	接受整個請求檔案或者資料所花的時間
‘DOMContentLoaded’ 事件	從該請求開始進行DNS定址到整個頁面的DOM被下載下來所花的時間。注意：此時只是頁面的骨架被下載下來了，其中的一些資源（如果圖片，js等）沒有下載下來。當頁面的DOM下載下來了之後，使用者就可以看到了頁面了，但是有些資源還在陸續的下載中。
‘load’ 事件	從該請求開始進行DNS定址到整個頁面全部（包括資源）下載下來所花的時間。

3． 頁面級的請求資訊

　　　　也就是整個頁面的請求的一些匯總資訊。

 

　　轉自：http://www.cnblogs.com/yanyangtian/archive/2011/02/10/1950493.html