精通软件性能测试与LoadRunner最佳实战 连载十

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。

序    号	列    名	含    义
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地址