HttpWatch軟件介紹與基本使用

以下內容使用的環境如下：

Windows 8Enterprise x64

Internet Explorer10

Httpwatch 9.0

軟件及功能介紹

1、主界面

主界面從上至下分爲：工具欄、請求列表、詳細信息三部分。

2、工具欄

在上圖中，從左至右分別爲：

Record 開始錄製瀏覽器請求過程

Stop 停止錄製

Clear 清空請求列表中的信息

View 下拉菜單如下圖所示

|Group by Page 將同一個URL的請求分組顯示

|Time Chart Column 在列表中顯示時間圖標

|Select Columns 定製列表中的顯示列，如下圖所示

|Properties 屬性

|Offsets timings 時序偏移，顯示URL的請求時間時序

|Local Time 顯示當前的本地實時錄製時間

|GMT/UTC 顯示國際標準時間格式

Summary 顯示請求列表中單個URL請求的詳細信息

Find 查找

Filter 過濾器，其實就是按條件定位信息

Save 保存爲不同格式

Print 打印

Tools 主要用來清理Cache、Cookies和Session

Help 幫助

3、請求列表

Started 每個URL請求開始加載的時間

Time Chart 時間分割圖，用不同的顏色表示

！警告

Time 加載時間

Sent 發送請求傳送的字節

Received 接收請求傳送的字節

Method Http請求的方法

Result 請求結果，狀態碼錶示

Type 類型

URL URL地址

4、詳細信息視圖顯示每個http請求項的詳細信息，主要對於一次請求單獨分析

Overview 主要是描述當前頁面的一個Action情況，包括Display URL、Started At、Connect、HTTP Request、HTTP Response和Redirect（地址重定向）

Time Chart 時序圖，表示當前頁面加載過程中各個時間段

Headers 表示從Web服務器發送和接受的報頭信息

Cookies 客戶端通過訪問網站服務器將部分數據信息存放在客戶端的一種技術。

Cache 緩存，主要是用於在存放頻繁訪問的數據信息，將這些存放在這個存儲器中，從而加速下一次訪問。

Content 表示當前頁面傳輸的內容，如上圖所示。

Stream 該功能主要是描述詳細頁面傳輸流信息。

Query String 如上圖所示，url就是這個傳遞的查詢參數

POST Data 如上圖所示，傳輸數據信息中，將頁面上輸入的信息都顯示在列表中

Httpwatch基本使用

1、QQ空間首頁Summary分析

該圖是首次進入QQ空間首頁的請求列表圖。

從圖中可以看出進入QQ空間首頁總耗時11.267s，總共會進行21次請求，包括資源文件html、css、js、圖片等。如果一個網頁的總http請求數量太多，會造成頁面加載的緩慢，在IE中，還會存在資源文件加載並行數量的限制，優化的方法是將http請求合併處理，如多個css、js文件合併，一些小的圖標圖片使用css的“雪碧”技術合併到一張圖。

從圖中可以看到下載字節數、發送字節數、壓縮字節數分別約爲260Kb、16Kb、112Kb。發送的字節數的減少優化，一個很重要的就是資源文件避免使用有cookie的域名，比如在qq.com下面會有一些cookie，爲了避免在請求js，css等發送cookie，需要將這些資源放到其他域上，而且要一直保持這個域名的乾淨，不能寫入任何cookie。

從上圖中可以看出http連接過程中各階段的耗時統計，依據各個階段耗時長短對症下藥，優化連接速度。

結論，根據Httpwatch的Summary功能，有的網頁加載的整個過程所產生的請求數超過100個，各種js、圖片、以及外部鏈接滿天飛，有的網頁圖片像素過大導致圖片加載過慢，這些都大大影響了用戶體驗。對比分析可以看出QQ空間首頁頁面已經經過合理的優化，連接速度在網絡狀況良好的情況下可以到達用戶的期望。

2、登錄QQ空間個人中心