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工具的安装过程十分简单，所以不进行赘述，读者朋友自行安装即可。