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

从上图看出进入个人中心后由于要加载大量资源的加载，导致页面的加载速度需要耗时46.882s，数据量也必然大大增加。

使用Httpwatch的过滤器对http请求进行过滤，

过滤图片数据得：

       从图中看出图片资源的加载时间比较长，http连接数量比较多，达到107个，图片传输的大小也比较大，是 页加载速度的主要影响因素。优化的方法是降低图片质量，进而压缩图片大小，不过这样也会影响用户的体验，图片质量和传输速度需要进行权衡。也可以通过使用缓存，把常用的图片缓存在本地，进而加快加载速度。

过滤cache数据

从图中可以看出读取本地cache的大小为0，因为本次测试是在本地没有任何缓存的情况下得到的数据。

单次http请求分析

       单击请求列表中的列，可以在下面看到关于该次请求的详细信息，图中显示的为数据流信息，左侧为请求数据，主要是http的请求头，右侧是服务器响应数据，包括状态码、数据类型、时间等等，下面部分为资源文件的二进制信息。

HttpWatch的更多功能

HttpWatch向外部提供了编程接口，可以结合QTP进行自动化测试。在QTP的实际应用中，可用于验证链接的连通性，检测 页中某功能的传输速度和时间。也可以使用loadrunner调用httpwatch分析web前端性能。

学习笔记~~不当之处欢迎指正~~o(∩_∩)o