loadrunner ://files-cdn.cnblogs.com/files/tester2test/hw.pdfyslow h0erÆmÇÈ É - 12.2 httpwatch...

《精通软件性能测试与 LoadRunner 最佳实战》样章作者博客：http://tester2test.blog.51cto.com

读者群: 211635778 mail：[email protected]



12.1 前端性能测试性能测试通常我们最关心的是后端服务器的处理能力，而前端的性能通常被大家忽视，本章节将对前端的性能测试内容进行介绍。随着性能测试工作的深入开展，性能测试工作也越发精细，在服务器、数据库、中间件、网络、源代码等方面进行性能调优、性能得到提升后，现在越来越多的公司已经关注产品前端的性能表现。图 12-0 五大主流浏览器综合性能对比测试文章注：

1．该图片相关信息来自华军资讯； 2．文章连接：http://news.newhua.com/news/2011/0407/119523.shtml 尽管这篇文章发表于 2011年，但是其具有一定的代表性，这篇文章结合五大主流浏览器：即：微软的 IE、Mozilla的火狐、谷歌的 Chrome、挪威欧普拉软件公司的 Opera、苹果的 Safari。从标签启动时间、页面加载时间、硬件加速测试、内存占用情况等方面进行了对比，给出了相关的具体数据信息。以上为浏览器（即 Web 前端）的一些对比数据，其也反映了在对浏览器产品实现的过程中，各个厂家因编码不同、实现方法、关注的重点不同，所以最终产品的表现也不尽相同。这里抛开浏览器产品本身性能差异，而从应用特定浏览器分析被测试应用的方法和改善前端性能手段两方面进行简单说明。要想了解应用的前端性能表现，您可以通过使用 HttpWatch、Page Speed、Dyna Trace和 Yslow等工具来获得系统前端的性能指标相关信息。

12.2 HttpWatch 工具 12.2.1 HttpWatch 简介

HttpWatch是强大的网页数据分析工具，其可以集成在 Internet Explorer和 FireFox工具栏，其主要包括网页摘要 Cookies管理、缓存管理、消息头发送/接收、字符查询、POST 数据和目录管理功能、报告输出。它不用代理服务器或一些复杂的网络监控工具，就能够在显示网页同时显示网页请求和返回的日志信息。您只需要输入要考察性能的网站地址，启动录制按钮，软件就可以对网站与浏览器之间的请求和响应通信情况进行分析。每一个 HTTP记录都可以详细分析其 Cookies、消息头、字符查询等信息，支持 HTTPS及分析报告输出为 XML、CSV等格式。目前官方（网址：http://www.httpwatch.com/）提供两个 HttpWatch版本下载。



HttpWatch Basic Edition （基础版）：免费提供下载，任何人都可以用来查看基本的 HTTP / HTTPS的详细信息，并记录跟踪文件。

HttpWatch Professional Edition （专业版）：该版本没有任何功能限制，可以通过HttpWatch获取 HTTP / HTTPS的任何 URL的详细信息，并能被用于查看跟踪文件，需要说明的是在工具安装过程中其需要许可文件（后缀为.lic的文件）。关于 HttpWatch工具的安装过程十分简单，所以不进行赘述，读者朋友自行安装即可。 12.2.2 HttpWatch 工具使用这里以 HttpWatch Professional Edition 8.0作为讲解工具版本，作者的浏览器是 IE 8.0。HttpWatch安装完成以后，您可以打开 IE浏览器，在插件栏和菜单栏您都可以打开该插件，如图 12-1所示。

图 12-1 基于 IE浏览器 HttpWatch插件打开方式其操作方式也十分简单，您打开插件以后，单击红色的【Record】录制按钮，然后在 IE的 URL地址栏中输入您要考察的网站地址即可，这里以输入“http://www.baidu.com”为例，即：我们想了解访问百度首页的一些性能指标情况。鉴于我们仅考察百度首页的相关信息，得到该部分内容相关数据后，您就可以单击【Stop】按钮，停止录制。录制完成之后，在HttpWatch 工具中将展现其相关的数据信息，如图 12-2 所示。停止录制后，插件默认选中“Summary”页，同时下方展示相关数据信息，如图 12-3所示。这部分内容将是我们重点讲解的内容。



图 12-2 基于 IE浏览器 HttpWatch插件打开方式图 12-3 基于 IE浏览器 HttpWatch插件打开方式首先，了解一图 12-3上半部分相关数据信息的含义，如图 12-4所示。您会看到该数据表格共包含 8列，那么每列代表的含义是什么呢？图 12-3 访问百度首页获得的数据信息上半部分下面简单对各列的信息描述一下，参见表 12-1。表 12-1 HttpWatch概要信息相关列信息说明序号列名含义

1 Started 表示开始记录 URL的起始时间，在本例中应用的是偏移时间，您还可以在视图菜单中设置为本地时间或国际标准时间

2 Time 从请求发出直到返回最后的结果所耗费的时间，Time=Blocked+DNS Lookup+Connect+ Send+Wait+Receive，后续将展示这部分内容

3 Sent 发送请求时传送的字节 4 Received 系统响应返回结果接收的字节 5 Method 请求过程中使用的方法，一般为 GET和 POST 6 Result 系统返回的请求结果，一般用状态码表示 7 Type 以图标的形式体现下载的资源类型，将鼠标移动到图标处将显示文本提示信息 8 URL 显示当前请求的页面 URL地址下面参见图 12-4，针对访问百度首页您是不是就可以得出如下结论了呢？访问百度首页，共耗费了 60毫秒，发送 668字节，接收 4300字节，应用的是 GET方法，服务器给予成功响应。也许有的读者说了不可能吧，怎么这么快？这是因为由于作者经常访问百度，所



以该地址的一些资源信息被缓存了，从图 12-4 您也能看到有些内容是从缓存中取得的。接下来，再让我们一起来看一下下方丰富的相关数据信息，如图 12-5所示。图 12-5 访问百度首页获得的数据信息下半部分让我们逐页来看一下相关的数据信息：（1）Overview页信息（如图 12-6所示）

图 12-6 访问百度首页获得的数据信息下半部分——Overview页信息 Display URL：表示请求的地址为百度首页，即：http://www.baidu.com/。 Started At：发送请求的时刻，本地时间。 DNS Lookup：DNS解析，找名称为 www.baidu.com的主机。 Connecting：开始同解析后的主机进行连接，主机 IP地址为 119.75.217.56。 Connected ：与 119.75.217.56 建立了连接，本地的连接地址和端口为“192.168.0.151:4896”。 HTTP Request：通过浏览器发出的请求，这里的请求是“http://www.baidu.com/”。 HTTP Response：服务器返回的头和内容信息。（2）Time Chart页信息（如图 12-7所示）。

图 12-7 访问百度首页获得的数据信息下半部分——Time Chart页信息该页以直观线条方式显示了各部分的耗时情况，左侧显示考察的 URL总体耗时情况，右侧针对左侧图示给出了 Blocked（阻塞）、DNS Lookup（DNS 寻址）、Connect（连接）、Send（发送请求）、Wait（等待服务器响应）、Receive（返回响应）、TTFB（即：Time To First Byte，首字节返回）和 Network（网络）耗费时间的情况。下面作者以表格形式给出各部分耗时相关的一些说明信息，参见表 12-2所示。表 12-2 各段耗时说明序号图示名称含义 1 Blocked

阻塞时间包括任何预处理时间（比如缓存查找）和花费的时间等待网络连接可用。浏览器限制数量的并发网络连接每个主机名和将请求排队，如果已经达到极限则后续请求需排队 2 DNS Lookup DNS解析一个主机名到一个 IP地址所耗费的时间



3 Connect 连接是所需的时间创建一个 TCP连接到Web服务器(或代理)。如果一个安全的 HTTPS连接正在用这段时间包括 SSL握手过程

4 Send 发送是发送 HTTP请求消息到服务器所需的时间 5 Wait

等待是等待从服务器得到响应消息的时间。这个值包括由于网络延迟和请求Web服务器所需时间 6 Receive

客户端接收从服务器读取响应消息的时间。这个值取决于内容返回的大小、网络带宽和是否使用了 HTTP压缩等 7 TTFB

TTFB 是从浏览器发出请求到服务器返回第一个字节所耗费的时间。它包括 TCP连接时间，发送请求时间和接收第一个字节的响应消息时间 8 Network 网络是一个 HTTP请求在网络消息传输上耗费的时间从图 12-7您可以一目了然地看到访问百度首页共耗费了 60毫秒的时间，其主要耗费时间的部分在服务器返回响应数据上，其耗费了 39毫秒。（3）Headers页信息。

图 12-8 访问百度首页获得的数据信息下半部分——Headers页信息图 12-8给出了发送请求头和返回请求头的相关内容，这里我们也列一个表格给予分析，参见表 12-3和表 12-4所示。表 12-3 客户端发送表头说明序号表头信息含义 1 GET /HTTP/1.1 “GET”代表请求方法，“HTTP/1.1”代表协议和协议的版本 2 Accept

Accept请求报头域用于指定客户端接受哪些类型的信息。例如：Accept：text/html，表明客户端希望接受 html文本 3 Accept-Encoding

Accept-Encoding请求报头域类似于 Accept，但是它是用于指定可接受的内容编码。例如：Accept-Encoding:gzip,deflate.如果请求消息中没有设置这个域服务器假定客户端对各种内容编码都可以接受 4 Accept-Language

Accept-Language请求报头域类似于 Accept，但是它是用于指定一种自然语言。例如：Accept-Language:zh-cn，中文。如果请求消息中没有设置这个报头域，服务器假定客户端对各种语言都可以接受

5 Connection 连接类型，默认为 Keep-Alive（长连接），如果不希望使用长连接，则需要在 header中指明 Connection的值为 Close

6 Cookie

Cookie是由服务器端生成，发送给浏览器，浏览器会将 Cookie的 key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该 Cookie给服务器。服务器可以利用 Cookies包含信息的任意性来筛选并经常性维护这些信息，以判断在 HTTP传输中的状态。可以判断其是否登录过网站，客户的喜好等 7 Host

Host请求报头域主要用于指定被请求资源的 Internet主机和端口号，它通常从 HTTP URL中提取出来的，我们在浏览器中输入：http://bbs.51testing.com/，浏览器发送的请求消息中就会包含 Host请求报头域，如下：Host：bbs.51testing.com：n，此处使用缺省端口号 80，若指定了端口号为 8080，则变成：Host：bbs.51testing.com:8080

8 User-Agent User-Agent请求报头域允许客户端将它的操作系统、浏览器和其他属性告诉服务器关于 GET和 POST方法在这里简单做一下说明，GET方法是默认的 HTTP请求方法，我们日常用 GET方法来提交表单数据，然而用 GET方法提交的表单数据只经过了简单的编码，同时它将作为 URL的一部分向Web服务器发送，因此，如果使用 GET方法来提交表



单数据就存在着安全隐患上。同时由于 GET方法提交的数据是作为 URL请求的一部分所以提交的数据量也不能太大。POST方法是 GET方法的一个替代方法，它主要是向Web服务器提交表单数据，尤其是大批量的数据。POST方法克服了 GET方法的一些缺点。通过 POST方法提交表单数据时，数据不是作为 URL请求的一部分而是作为标准数据传送给Web服务器，这就克服了 GET 方法中的信息无法保密和数据量太小的缺点。因此，出于安全的考虑以及对用户隐私的保护，通常表单提交时采用 POST方法。表 12-4 服务器端响应返回表头说明序号表头信息含义 1 HTTP/1.1 200 OK “HTTP/1.1代表协议和协议的版本，200为 HTTP响应代码，表示成功 2 Cache-Control

Cache- Control 指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置 Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括 no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached，响应消息中的指令包括 public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下： Public指示响应可被任何缓存区缓存; Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效; no-cache指示请求或响应消息不能缓存; no-store 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存; max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应; min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应; max-stale 指示客户机可以接收超出超时期间的响应消息。如果指定 max-stale 消息的值，那么客户机可以接收超出超时期指定值之内的响应消息

3 Connection 连接类型，默认为 Keep-Alive（长连接），如果不希望使用长连接，则需要在 header中指明 Connection的值为 Close

4 Content-Encoding

Accept-Encoding请求报头域类似于 Accept，但是它是用于指定可接受的内容编码。例如：Accept-Encoding:gzip,deflate，如果请求消息中没有设置这个域服务器假定客户端对各种内容编码都可以接受 5 Content-Length 表示内容长度，只有当浏览器使用持久 HTTP连接时才需要这个数据 6 Content-Type 表示服务器发送的内容的MIME类型 7 Date

Date头域表示消息发送的时间，时间的描述格式由 rfc822定义。例如，Thu,15 Nov 2012 05:56:32 GMT。Date描述的时间表示世界标准时间

8 Expires

Expires: Thu,15 Nov 2012 05:56:32 GMT 需和 Last-Modified结合使用。用于控制请求文件的有效时间，当请求数据在有效期内时，客户端浏览器从缓存请求数据而不是服务器端，当缓存中数据失效或过期，才从服务器更新数据 9 Server

指示服务器的类型，如 apache、 tomcat。这里出现的 BWS 应该是 Baidu Web

Server，百度自己研发的Web服务器用来代替 apache 关于MIME（Multipurpose Internet Email Extension），意为多用途 Internet邮件扩展，它是一种多用途网际邮件扩充协议，在 1992年最早应用于电子邮件系统，但后来也应用到浏览器。服务器会将它们发送的多媒体数据的类型告诉浏览器，而通知手段就是说明该多媒体数据的MIME类型，从而让浏览器知道接收到的信息哪些是MP3文件，哪些是 JPEG文件等。当服务器把把输出结果传送到浏览器上的时候，浏览器必须启动适当的应用程序来处理这个输出文档。在 HTTP中，MIME类型被定义在<head>、</head>部分的 Content-Type中。（4）Cookies页信息。 Cookies页展示了在我们访问百度首页时，服务器将哪些数据信息存放在到了客户端，从图 12-9中我们可以看到了，其主要设定了 2个 Cookie：“BAIDUID”和“BDUT”，键值分别为“D6572EDE2B026FAE0B68BBB375FAD7C3:FG=1”和“6yg771C5C327A86C92969



图 12-9 访问百度首页获得的数据信息下半部分——Cookies页信息 2CE95FF7770B35813afe68626e2f”，指定了它们的路径、域、有效期等信息。（5）Cache页信息。如图 12-10所示，您可以看到针对要考察的 URL，在请求前、后相关缓存的一些信息，下面以表格形式给大家介绍一下项目信息项含义，参见表 12-5。

图 12-10 访问百度首页获得的数据信息下半部分——Cache页信息表 12-5 服务器端响应返回表头说明序号信息项含义 1 URL in cache? 这表明当前选中的 URL是否在浏览器缓存中 2 Expires

Web服务器可以指定这个使用 Expires表头项，指定当缓存条目将到期的日期/时间 3 Last Modification 服务器返回 last - modified头条目，存储或更新本地缓存，这里没有设置该项 4 Last Cache Update 最近缓存被更新的日期/时间 5 Last Access 上一次从缓存读取内容的日期/时间 6 ETag

Etag 是 URL的 Entity Tag，用于标示 URL对象是否改变，区分不同语言和 Session等。具体内部含义是使服务器控制的，就像 Cookie那样。以前的 HTTP标准里有个 Last-Modified+If-Modified-Since 表明 URL对象是否改变。Etag 也具有这种功能，因为对象改变也造成 Etag改变，并且它的控制更加准确。Etag有两种用法：If-Match/If-None-Match，就是如果服务器的对象和客户端的对象 ID（不）匹配才执行。这里的 If-Match/If-None- Match 都能一次提交多个 Etag。If-Match 可以在Etag未改变时断线重传。If-None-Match可以刷新对象（在有新的 Etag时返回）

7 Hit Count 浏览器从缓存取得内容的次数（6）Query String页信息（如图 12-11所示）。图 12-11 访问百度首页获得的数据信息下半部分——Query String页信息有时候您在浏览页面的时候，经常在地址栏看到类似于“http://www.xxx.com/...?

name1=value1&name2=value2&...”的信息。查询字符串（Query String）是用来传递参数的，在该“http://www.xxx.com/...?name1=value1&name2=value2&...”URL中，“name1”、“name2”就是参数，而“value1”和“value2”就是参数的值。当然有些是显式传输的，有一些是隐式传送的。如：访问知名的 CSDN 网站，您输入用户名和密码信息，其用户名等相关参数和值将被记录，出于安全性方面考虑，作者将关键的信息予以了屏蔽，如图 12-12所示，而访问百度首页没有查询字符串，所以显示如图 12-11所示。（7）POST Data页信息（如图 12-13所示）。



图 12-12 登录 CSDN－Query String页信息图 12-13 访问百度首页获得的数据信息下半部分——POST Data页信息 “Post Data”是以 Post方法传送的相关信息，这里由于百度首页没有应用该方法传送数据，所以无相关信息。下面我们拿“51testing”用户登录为例来进行一下说明，参见图 12-14和图 12-15所示。图 12-14 51tesing论坛登录界面信息图 12-15 针对 51testing论坛登录——POST Data页信息从图 12-14和图 12-15我们可以发现相关的输入信息均已被记录，这里鉴于安全方面的考虑，作者将关键的密码相关信息给予了屏蔽。（8）Content页信息。如图 12-16所示，该页是服务器返回的 Http响应相关信息。（9）Stream页信息。如图 12-17所示，该页分成了 2个窗口，左侧为发送请求相关信息，右侧为响应信息。共发送 668个字节到 119.75.218.77:80，80为端口号，服务器返回响应信息为 4300个字节给

192.168.0.141:5427，5427为端口号。（10）Warnings页信息如图 12-18所示，该页显示单个请求的警告，这里出现一个 HW1004的警告信息，该信息为“The request content has been cached, but no Last-Modified or ETag header was set. The browser will not be able to re-validate the content using a conditional request。”

图 12-16 访问百度首页获得的数据信息下半部分——Content页信息图 12-17 访问百度首页获得的数据信息下半部分——Stream页信息

图 12-18 访问百度首页获得的数据信息下半部分——Warnings页信息（11）Comment页信息——该页面显示页面的评价相关信息。 HttpWatch 也提供了非常方便的查询和过滤功能，您可以通过单击【Find】按钮，来查询您关心的相关信息，如图 12-19所示。您可以通过单击【Filter】按钮，来设定过滤条件得到您关心的相关信息，如图 12-20 所示。



图 12-19 Find对话框信息图 12-20 Filter对话框信息可以通过选择保存相应的文件输出格式将数据信息进行保存，如图 12-21所示。还可以通过选择性地清除 Cache和 Cookies相关信息等操作，如图 12-22所示。图 12-21 Save快捷菜单相关信息图 12-22 Tools快捷菜单相关信息

loadrunner ://files-cdn.cnblogs.com/files/tester2test/hw.pdfyslow h0erÆmÇÈ É - 12.2 httpwatch...

Documents