HttpWatch网页数据分析工具简介及使用技巧-控件新闻-慧都网

HttpWatch网页数据分析工具简介及使用技巧

原创|使用教程|编辑：黄竹雯|2016-07-12 16:12:34.000|阅读 1247 次

概述：很多朋友在做性能优化的时候只知道跟踪SQL，然后找到SQL性能差的进行优化，当然这也是办法之一，但影响web加载速度的原因很多。本文将为大家介绍强大的网页数据分析工具——HttpWatch，以及它的使用方法。

最近一段时间再做页面的性能优化，很多朋友在做性能优化的时候只知道跟踪SQL，然后找到SQL性能差的进行优化，当然这也是办法之一，但影响web加载速度的原因很多，数据库联接只是其中的一部分，想真正优化页面还是要从页面的每一次请求进行分析，甚至一张图片的大小都是我们优化的节点。

HttpWatch强大的网页数据分析工具，通过它，我们可以观察每一次请求的轨迹，还有网页摘要、Cookies管理、缓存管理、消息头发送/接受，字符查询，POST 数据等页面深层信息。

》》点击下载HttpWatch最新版免费试用

下面我们简单介绍它的实用，安装完成后，在ie工具中可以找到它的开关，打开后出现在浏览器的下方，如图1：

图1

点击“record”按钮开始录制请求轨迹。

图2就是所有请求明细

图2

从上图中可以看出每一次请求的地址、请求开始的时间（相对时间）、花费的时间、请求类型、请求状态、请求方式等。

从timeChart，我们可以一目了然的看到那些请求花费的时间较长，一般柱状的长短表示从请求到接受共花费的时间，我们重点需要优化那些柱状较长的部分，当然我们也可以点击time列，按请求时间排到序，直接找出请求时间最长的部分。

针对每一条柱状图，又分为好几个部分，用不同颜色表示。这些颜色表示不同的时间段。举例说明，我们点击一条明细，在下方会出现该条请求的所有详细信息。我们点击TimeChart的Tab页。

这是一个google广告的请求，分为5部分，依次如下：

白色：空白时间，0.001s，表示页面刷新后0.001s才开始这个请求。

绿色：请求发送时间，也是0.001秒

红色：等待时间，这个影响因素较多，网络、数据库查询等等。

青色：请求接收，这条请求结果只返回了304的请求状态，所以时间很短，上图几乎看不到。

蓝色：从浏览器缓冲中读取，因为返回304，表示该文件最后更新日期没有发生改变，所以从缓存中读取该文件。

在图2的明细表中还有几个指标需要我们注意，一个是received和result，表示请求接受的大小和状态。举例说明，在上面的例子中我们找到分别在0.272s和0.892s两次请求jquery文件：

       -----------------------------------------------------------------------------
       Start         received     result     url
       0.272       15981        200
       0.892       91              304    

两次请求有什么不同，第一次200请求成功请求，所以接受的数据大小为js的大小15.9K，第二次304，只返回一个状态，表示该文件最后更新时间没有改变，文件可以从浏览器缓存中取得。从这也可以看出在ie中点刷新和在地址栏打回车并不一样，点刷新素有文件都会像服务器发送请求，只是如果文件被缓存，只返回304状态，在地址栏打回车时，缓存的内容不会像服务器发送请求，直接从缓存中获取，HttpWatch中result中显示为(cache)。当然点击每一条明细，也可以在下面的详细信息中查看是否被缓存，如何缓存，过期时间、健等信息。

还有其他信息，如cookies、queryString等信息，这里就不一一列举，大家多使用使用就熟悉了。