最近一段時(shí)間再做頁(yè)面的性能優(yōu)化，很多朋友在做性能優(yōu)化的時(shí)候只知道跟蹤SQL，然后找到SQL性能差的進(jìn)行優(yōu)化，當(dāng)然這也是辦法之一，但影響web加載速度的原因很多，數(shù)據(jù)庫(kù)聯(lián)接只是其中的一部分，想真正優(yōu)化頁(yè)面還是要從頁(yè)面的每一次請(qǐng)求進(jìn)行分析，甚至一張圖片的大小都是我們優(yōu)化的節(jié)點(diǎn)。

HttpWatch強(qiáng)大的網(wǎng)頁(yè)數(shù)據(jù)分析工具，通過它，我們可以觀察每一次請(qǐng)求的軌跡，還有網(wǎng)頁(yè)摘要、Cookies管理、緩存管理、消息頭發(fā)送/接受，字符查詢，POST 數(shù)據(jù)等頁(yè)面深層信息。

》》點(diǎn)擊下載HttpWatch最新版免費(fèi)試用

下面我們簡(jiǎn)單介紹它的實(shí)用，安裝完成后，在ie工具中可以找到它的開關(guān)，打開后出現(xiàn)在瀏覽器的下方，如圖1：

點(diǎn)擊“record”按鈕開始錄制請(qǐng)求軌跡。

圖2就是所有請(qǐng)求明細(xì)

從上圖中可以看出每一次請(qǐng)求的地址、請(qǐng)求開始的時(shí)間（相對(duì)時(shí)間）、花費(fèi)的時(shí)間、請(qǐng)求類型、請(qǐng)求狀態(tài)、請(qǐng)求方式等。

從timeChart，我們可以一目了然的看到那些請(qǐng)求花費(fèi)的時(shí)間較長(zhǎng)，一般柱狀的長(zhǎng)短表示從請(qǐng)求到接受共花費(fèi)的時(shí)間，我們重點(diǎn)需要優(yōu)化那些柱狀較長(zhǎng)的部分，當(dāng)然我們也可以點(diǎn)擊time列，按請(qǐng)求時(shí)間排到序，直接找出請(qǐng)求時(shí)間最長(zhǎng)的部分。

針對(duì)每一條柱狀圖，又分為好幾個(gè)部分，用不同顏色表示。這些顏色表示不同的時(shí)間段。舉例說明，我們點(diǎn)擊一條明細(xì)，在下方會(huì)出現(xiàn)該條請(qǐng)求的所有詳細(xì)信息。我們點(diǎn)擊TimeChart的Tab頁(yè)。

這是一個(gè)google廣告的請(qǐng)求，分為5部分，依次如下：

白色：空白時(shí)間，0.001s，表示頁(yè)面刷新后0.001s才開始這個(gè)請(qǐng)求。

綠色：請(qǐng)求發(fā)送時(shí)間，也是0.001秒

紅色：等待時(shí)間，這個(gè)影響因素較多，網(wǎng)絡(luò)、數(shù)據(jù)庫(kù)查詢等等。

青色：請(qǐng)求接收，這條請(qǐng)求結(jié)果只返回了304的請(qǐng)求狀態(tài)，所以時(shí)間很短，上圖幾乎看不到。

藍(lán)色：從瀏覽器緩沖中讀取，因?yàn)榉祷?04，表示該文件最后更新日期沒有發(fā)生改變，所以從緩存中讀取該文件。

在圖2的明細(xì)表中還有幾個(gè)指標(biāo)需要我們注意，一個(gè)是received和result，表示請(qǐng)求接受的大小和狀態(tài)。舉例說明，在上面的例子中我們找到分別在0.272s和0.892s兩次請(qǐng)求jquery文件：

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

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

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

HttpWatch使用教程推薦閱讀：

HttpWatch學(xué)習(xí)筆記一：HttpWatch啟動(dòng)與工具欄設(shè)置

HttpWatch學(xué)習(xí)筆記二：過濾，保存，打印

HttpWatch學(xué)習(xí)筆記三：請(qǐng)求網(wǎng)格