HttpWatch學習筆記三

前面講了一些基本的操作和菜單欄這些,這一講開始要涉及到一些核心的東西了,看本章之前,需要讀者具備一些HTTP方面的背景知識,否則學習起來可能會有些吃力。

請求網格

其實我一直在想,叫請求網格到底合不合適,但一直又不知道怎麼翻譯,所以還是先用着吧。
請求網格默認顯示的列如下所示,可以通過View子菜單下的Select Columns來設置要顯示的列。

各個字段的解釋如下表:

Started 請求開始的時間,第1項爲絕對時間,後面的都是相對於這1項的偏移量
Time Chart 同一個頁面中,某一請求相對於其它請求的時間圖形
! 當有告警被發現時,顯示該標誌
Time 從發送該請求到接收完響應數據的時間
Sent 發送數據的總量,單位爲byte,包括header和POST data的數據量
Received 接收數據的總量,單位爲byte,因返回的狀態碼不同值也會不同:
200:顯示值爲header和content的大小。如果內容被壓縮了,顯示值爲已壓縮content的大小加上未壓縮header的大小。當使用SSL時,顯示值爲加密後的大小,通常比未加密的值大些。
304:顯示值爲header的大小。
(Cache):顯示值爲0。
Method 請求發送時所用的方法,如GET、POST等
Result 請求成功時將顯示狀態碼,如200表示OK。
(Cache):表示數據是從緩存中讀取的。
(Aborted):表示在完成之前中止了操作,例如一個圖片正在下載中,但你點擊了一個轉向其它頁面的鏈接。
Type 以圖形表示內容的類型
URL 請求的地址
通常情況下,請求網格中的記錄以不同頁面爲依據進行分組,組的標題欄如下圖所示:

前面是請求開始的時間,後面是頁面的標題,這幾個字大家再熟悉不過了吧。
通常有兩種顏色的分組,頁的標題欄爲藍色表示是一個普通頁面,頁的標題欄爲黃色表示是在前一個頁面進行的動態改變,例如AJAX調用。
仔細觀察Time Chart這一列,發現其中的條形圖有着不同的顏色段,而且還有幾條豎線,現在來詳細講解下。
一次請求是由很多階段組成的,例如DNS的轉換、建立連接、發送請求等,而不同的請求所經歷的階段也不完全相同,時間條形圖的各個段說明如下:
Blocked 前期預處理時間(如cache搜索)和等待網絡可用的時間
DNS Lookup 將主機名轉換成IP地址的時間
Connect 創建連接的時間
Send 發送請求的時間
Wait 等待服務器響應的時間
Receive 接收響應的時間
Cache Read 從緩存中讀取數據的時間
  TTFB Time To First Byte,網絡開始初始化到接收到第1個字節數據的時間
  Network 網絡開始初始化到網絡使用完成的時間
一個頁面從開始下載數據到最終完全顯示,中間會執行一系列的頁面事件,而IE和Firefox中的事件也不完全相同,說明如下:
Render Start 開始渲染事件,當瀏覽器開始顯示頁面時觸發
DOM Load 當頁面的DOM已加載完畢並可以提供給腳本調用時觸發
IE中不顯示,Firefox中對應DOMContentLoaded事件
Page Load 頁面載入事件,當DOM和圖片都加載完成後觸發
對應onload事件
HTTP Load 標誌着所有的HTTP或HTTPS請求結束

上面講了一些基礎,下面我們舉個例子來具體分析下,還是錄製的百度的頁面,如下圖:

首先看標記爲1和2的兩個分組標題部分,標記1的開始時間爲全0,標記2的開始時間爲00:00:06.200,這個時間是相對於標記1的開始時間的一個偏移量,也就是說頁面2是在頁面1請求後的6秒左右再發起請求的。
然後來看看標記3,這裏有很多的時間值,每個時間值都表示該請求發起的時間,這個時間是相對於頁面開始時間的偏移量的,比如看頁面2的那幾個時間,都是相對於頁面2的開始時間計算的。
再看看標記4,這是一個時間條形圖,說明這個請求是在0.146秒開始發起的,先有一段Blocked時間,然後建立連接,再發送數據等等,可以看到,這個條形圖並不是向左靠齊的,因爲它是相對於該頁面中其它請求而言的。
把標記5、6、7連起來看,標記5說明在0.259秒的時候所有請求都發送完畢,標記6說明在該時間點頁面開始顯示,標記7說明在0.342秒的時候所有DOM和圖片都已加載完成並開始執行onload事件。
最後來看看圖片中被黃色標記了的一行,首先,感嘆號一列中爲空,說明沒有告警信息,Time列中顯示爲0.113,說明該請求共耗時0.113秒,Sent列爲383和Received列爲371,說明該請求發送了383字節的數據和接收了371字節的數據,Methoed列爲GET,說明使用的GET方法,Type列顯示了一個圖標,如果把鼠標移到上面,會顯示image/gif,說明請求的內容類型爲gif圖片,URL列顯示了請求的地址。

這一部分講解了中間網格部分的內容,當然有些細節沒有詳細闡述,需要讀者自己去操作,而且這些內容和HTTP協議有關,就像開篇說的,需要讀者懂一些HTTP知識。

最近才發現,寫博客也辛苦啊,尤其是那些圖,弄起來真麻煩啊,希望看過文章的人都留個言,也支持下我的勞動成果吧,現在可是晚上12:25啊。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章