建高性能ASP.NET站點 第五章—性能調優綜述（中篇）

建構高性能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

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

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

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

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

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

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

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

 2． 時間線的相關資訊

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

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

域名解析

尋找請求的檔案所在的伺服器的IP位址所花的時間

建立連接配接

打開用戶端到服務端的TCP連結所花的時間

發送請求

浏覽器發送請求所花的時間。大家可能有點奇怪：為什麼發送請求還要等待，難道不是打開連接配接就發送了請求嗎？

其實浏覽器會把要請求的檔案的請求放在請求隊列中，隊列的長度一般都是有限制的，如果頁面需要請求的檔案很多，如果隊列達到了最大的限制數量，那麼後續的檔案請求會等待。

等待響應

用戶端發送請求一直到接受服務端的第一個位元組所花的時間

接受資料

接受整個請求檔案或者資料所花的時間

‘DOMContentLoaded’ 事件

從該請求開始進行DNS尋址到整個頁面的DOM被下載下傳下來所花的時間。注意：此時隻是頁面的骨架被下載下傳下來了，其中的一些資源（如果圖檔，js等）沒有下載下傳下來。當頁面的DOM下載下傳下來了之後，使用者就可以看到了頁面了，但是有些資源還在陸續的下載下傳中。

‘load’ 事件

從該請求開始進行DNS尋址到整個頁面全部（包括資源）下載下傳下來所花的時間。

3． 頁面級的請求資訊

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

　　OK，今天就基本講述這些，下一篇就開始講述利用分析工具分析性能瓶頸，用上面的瀑布圖來分析一些常見的性能問題，這些性能問題會在後續文章中一個個的給出解決方案，敬請關注！ ：）

本文轉自yanyangtian51CTO部落格，原文連結：http://blog.51cto.com/yanyangtian/490219 ，如需轉載請自行聯系原作者