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请求进行过滤，

首先过滤文本文档html、css、js，得到结果为

从时间图看出文本文档加载时间短、http连接数量为12个，数据大小不足1Mb，所以这些类型的文件对网络速度的消耗不大，也不是网页加载速度慢的直接原因。

过滤图片数据得：

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

过滤cache数据

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

单次http请求分析

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

HttpWatch的更多功能

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

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