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空间个人中心