最近一段時間再做頁面的性能優化，很多朋友在做性能優化的時候只知道跟蹤SQL，然后找到SQL性能差的進行優化，當然這也是辦法之一，但影響web加載速度的原因很多，數據庫聯接只是其中的一部分，想真正優化頁面還是要從頁面的每一次請求進行分析，甚至一張圖片的大小都是我們優化的節點。

HttpWatch強大的網頁數據分析工具，通過它，我們可以觀察每一次請求的軌跡，還有網頁摘要、Cookies管理、緩存管理、消息頭發送/接受，字符查詢，POST 數據等頁面深層信息。

》》點擊下載HttpWatch最新版免費試用

下面我們簡單介紹它的實用，安裝完成后，在ie工具中可以找到它的開關，打開后出現在瀏覽器的下方，如圖1：

點擊“record”按鈕開始錄制請求軌跡。

圖2就是所有請求明細

從上圖中可以看出每一次請求的地址、請求開始的時間（相對時間）、花費的時間、請求類型、請求狀態、請求方式等。

從timeChart，我們可以一目了然的看到那些請求花費的時間較長，一般柱狀的長短表示從請求到接受共花費的時間，我們重點需要優化那些柱狀較長的部分，當然我們也可以點擊time列，按請求時間排到序，直接找出請求時間最長的部分。

針對每一條柱狀圖，又分為好幾個部分，用不同顏色表示。這些顏色表示不同的時間段。舉例說明，我們點擊一條明細，在下方會出現該條請求的所有詳細信息。我們點擊TimeChart的Tab頁。

這是一個google廣告的請求，分為5部分，依次如下：

白色：空白時間，0.001s，表示頁面刷新后0.001s才開始這個請求。

綠色：請求發送時間，也是0.001秒

紅色：等待時間，這個影響因素較多，網絡、數據庫查詢等等。

青色：請求接收，這條請求結果只返回了304的請求狀態，所以時間很短，上圖幾乎看不到。

藍色：從瀏覽器緩沖中讀取，因為返回304，表示該文件最后更新日期沒有發生改變，所以從緩存中讀取該文件。

在圖2的明細表中還有幾個指標需要我們注意，一個是received和result，表示請求接受的大小和狀態。舉例說明，在上面的例子中我們找到分別在0.272s和0.892s兩次請求jquery文件：

       -----------------------------------------------------------------------------
       Start         received     result     url
       0.272       15981        200       
       0.892       91              304         

兩次請求有什么不同，第一次200請求成功請求，所以接受的數據大小為js的大小15.9K，第二次304，只返回一個狀態，表示該文件最后更新時間沒有改變，文件可以從瀏覽器緩存中取得。從這也可以看出在ie中點刷新和在地址欄打回車并不一樣，點刷新素有文件都會像服務器發送請求，只是如果文件被緩存，只返回304狀態，在地址欄打回車時，緩存的內容不會像服務器發送請求，直接從緩存中獲取，HttpWatch中result中顯示為(cache)。當然點擊每一條明細，也可以在下面的詳細信息中查看是否被緩存，如何緩存，過期時間、健等信息。

還有其他信息，如cookies、queryString等信息，這里就不一一列舉，大家多使用使用就熟悉了。

HttpWatch使用教程推薦閱讀：

HttpWatch學習筆記一：HttpWatch啟動與工具欄設置

HttpWatch學習筆記二：過濾，保存，打印

HttpWatch學習筆記三：請求網格