Web系统页面性能测试研究

Web 系统页面性能测试报告书测试部门：软件研发部门测试人员 ； 王园兆1 ,前言：随着Web 应用系统的功能越来越强大，系统的界面越来越炫，用户不再怀念C/S架构系统的强

Web 系统页面性能测试报告书

测试部门：软件研发部门

测试人员 ； 王园兆

1

前言：

随着Web 应用系统的功能越来越强大，系统的界面越来越炫，用户不再怀念C/S架构系统的强大功能与华丽界面，B/S架构也成为系统开发者的首选。但是，由于系统开发商的良莠不齐以及系统的服务器、网络等资源的有限性，Web 应用系统的性能问题仍然比较突出，对应用系统进行性能测试也显得尤为重要。然而，提起Web 应用系统的性能测试，大家首先想到的是对应用系统后台的应用服务器、数据库性能测试，往往忽略了系统前端的页面性能测试。其实，页面的性能优化对于整个系统的性能提升起着非常重要的作用，特别是对并发访问量较大的事务处理型应用系统。

1. 不可或缺的页面性能测试

1.1. 页面性能测试概述

Web 应用系统可简单划分为系统前端与后台，系统后台一般包括包括应用服务器、中间件、数据库等，用来作业务的逻辑处理与数据存储；系统的前台指客户端即浏览器，用来进行页面的展示。Web 应用系统的性能测试通常是指对系统后台进行并发压力测试，从而定位系统后台的性能瓶颈，主要集中于对系统业务逻辑处理的性能分析上，而对页面的性能分析涉及较少。

页面性能测试则是针对于页面性能优化而开展的一种性能测试，目的是对Web 系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议，最终提升系统的整体性能表现，提高用户体验满意度。可见，Web 系统页面性能测试是相对Web 系统后台测试的另外一种性能测试，是Web 系统性能测试的一个重要部分。

1.2. 页面性能测试的必要性

相对于C/S架构的应用系统，Web 应用系统所有数据都需要从服务器端下载，虽然浏览器有缓存机制，但客户每次访问仍然需要下载大量的数据。特别是用户对系统要求越来越高，除了要求功能完备，对界面的美观、易用性也提出了更高的要求，越炫的页面也就意味着页面中要包含更多的脚本、样式表、图片和Flash ，页面的数据量也就越大，这对Web 系统的性能提出了极大的挑战。

曾经有个在线打印服务的应用提供商说他们的系统不需要关注系统性能问题，没有必要 2

进行性能测试，因为他们可以购买足够多的服务器来支撑系统；不少业界同行也认为只要有足够多的服务器资源，性能就不会存在问题。其实不然，他们都只关注到了应用系统的后台性能表现，而忽略了页面对系统整体性能的影响。举个例子，当一个页面中包含几百个请求，页面中没有经过优化的javaScript 文件、CSS 文件与图片件大小达到10MB ，即使当前只有一个用户在访问该系统，页面的访问速度也会慢得惊人，纵使增加再多的服务器也不见得会有明显的性能提升。

可见，对Web 应用系统的页面进行性能测试和优化是非常有必要的。只有通过对页面的性能测试，发现页面存在的性能问题并根据性能测试结果进行页面优化以提升页面的加载性能，从而提升系统的整体性能。在应用系统高并发访问时，更能体现出Web 页面优化后所带来的系统整体性能提升效果。

2. 页面性能测试的方法

2.1. 页面性能测试的内容

每个Web 系统的页面的组成部分大部相同，一般都包含html 文件、javaScript 文件、层叠样式表、图片等文件，而影响系统页面性能的正是这些文件或页面元素的编写不恰当、属性设置不正确、或使用方法有误造成的。因此，系统页面性能测试的内容与系统后台并发压力测试不一样，页面性能测试不是在多用户并发情况下去发现并定位系统的性能瓶颈而是检查页面各文件或元素是否以最优的方式编写。

各个开发商都有自己的一套标准去开发Web 页面，业界也有不少页面优化的方法如Yahoo 的34条“黄金守则”与Google 的页面优化建议等。根据业界Web 页面优化原则总结归纳出Web 系统页面性能测试内容：

1) 检查页面各个文件或元素是否合理使用缓存；

2) 检查页面的http 请求数是否已精简至最少；

3) 检查页面是否存在错误请求与重定向请求；

4) 检查页面的javaScript 文件、层叠样式表、图片等文件是否通过合并、压缩等方式

进行优化；

5) 检查页面的DOM 元素是否都是必要的，尽量减少DOM 元素数量；

6) 检查页面元素属性是否正确设置。

3 [1]

以上则是 Web系统页面性能测试的大概内容，在实际测试过程中可以根据项目的实际情况参照其它页面优化建议对性能测试项目进行增删，目的是尽可能找出影响页面性能的因素，对页面进行优化以提升系统整体性能。

2.2. 页面性能测试的方法

一个业务处理型的Web 系统所包含的页面往往是成百上千个，如果对每个页面都进行手工检查验证的话，那么对一个系统进行页面性能测试的工作量将是相当惊人的。为了对系统页面进行快速测试，推荐使用自动化工具进行测试，以提高测试效率与准确率。

目前对Web 页面进行性能测试的工具比较流行的有HttpWatch 、IBM 的Page Detailer Pro 、Google 的PageSpeed 与Yahoo 的Yslow ，在实际项目测试中可以根据项目的实际情况采用合适的辅助工具进行页面性能测试以提高测试效率。

2.3. 选择Yslow 的理由

YSlow 是Yahoo 发布的一款基于FireFox 的插件。 YSlow 可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。 YSlow 可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow 会列出具体的修改意见。

Yslow-23条黄金规则 1. 减少HTTP 请求次数

合并图片、CSS 、JS ，改进首次访问用户等待时间。

2. 使用CDN

就近缓存==>智能路由==>负载均衡==>WSA全站动态加速

3. 避免空的src 和href

当link 标签的href 属性为空、script 标签的src 属性为空的时候，浏览器渲染的时候会把当前页面的URL 作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试

4. 为文件头指定Expires

使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP 请求。

5. 使用gzip 压缩内容

压缩任何一个文本类型的响应，包括XML 和JSON ，都是值得的。旧文章

4

6. 把CSS 放到顶部

7. 把JS 放到底部

防止js 加载对之后资源造成阻塞。

8. 避免使用CSS 表达式

9. 将CSS 和JS 放到外部文件中

目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV 和IP 的比例权衡。

10. 权衡DNS 查找次数

减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。

IE 浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N 个二级域名来放图片。

11. 精简CSS 和JS

12. 避免跳转

同域：注意避免反斜杠 “/” 的跳转；

跨域：使用Alias 或者mod_rewirte建立CNAME （保存域名与域名之间关系的DNS 记录）

13. 删除重复的JS 和CSS

重复调用脚本，除了增加额外的HTTP 请求外，多次运算也会浪费时间。在IE 和Firefox 中不管脚本是否可缓存，它们都存在重复运算JavaScript 的问题。

14. 配置ETags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date 更具有弹性，例如某个文件在1秒内修改了10次，Etag 可以综合Inode(文件的索引节点(inode)数) ，MTime(修改时间) 和Size 来精准的进行判断，避开UNIX 记录MTime 只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags 减少Web 应用带宽和负载

15. 可缓存的AJAX

“异步”并不意味着“即时”：Ajax 并不能保证用户不会在等待异步的JavaScript 和XML 响应上花费时间。

16. 使用GET 来完成AJAX 请求

当使用XMLHttpRequest 时，浏览器中的POST 方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET 获取数据时更加有意义。

17. 减少DOM 元素数量

是否存在一个是更贴切的标签可以使用？人生不仅仅是DIV CSS

18. 避免404

有些站点把404错误响应页面改为“你是不是要找***”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返 5

回的404响应内容中找到可能有用的部分当作JavaScript 代码来执行。

19. 减少Cookie 的大小

20. 使用无cookie 的域

比如图片 CSS 等，Yahoo! 的静态文件都在主域名以外，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21. 不要使用滤镜

png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8 jpg

22. 不要在HTML 中缩放图片

23. 缩小favicon.ico 并缓存

3. 测试实例

本文将参考以上页面性能测试的内容与方法对一个实际的Web 系统进行页面性能测试，最后得出页面性能情况并指出页面需要进行优化的地方并提出优化建议。本测试案例将采用Yahoo 的Yslow 作为页面性能测试自动化工具，并使用showSlow 收集分析性能测试结果。

3.1. 测试环境搭建

3.1.1. 搭建本地showSlow 平台

showSlow 平台用来收集页面性能测试工具Yslow 的测试结果，并对测试结果进行分析展示。互联网上有一个在线的showSlow 平台，免费提供Yslow 的测试结果收集与展示。考虑到企业的某些系统可能存在商业机密，showSlow 开源网站提供源码允许用户在本地搭建一个平台来收集YSlow 的信息。在本案例中，在本地搭建showSlow 平台收集分析性能测试结果，步骤如下：

1) showSlow 环境平台采用Apache PHP Mysql，所以必须先搭建好Apache PHP Mysql

的环境，如无相关经验可使用AppServ 软件进行一体化安装，可快速搭建好环境；

2) 下载showSlow 并部署至Apache, 将showSlow 解压文件置Apache 的WWW 文件夹下即

可。showSlow 下载地址：http://code.google.com/p/showslow/downloads/list 。

3) 创建showSlow 数据库，并通过位于ShowSlow 文件夹的tables.sql 建立相应的数据

库表；

6

4) 配置showSlow 平台，将showSlow 文件夹下的config.sample.php 重命名为

config.php, 并根据实际情况修改文件中$showslow_base、$db、$user与$pass的值；

5) 至此，showSlow 平台搭建完毕。重启apache 服务器以让showSlow 平台的配置生效，

成功重启后，可尝试访问http://localhost/showslow/以确认showSlow 平台是否搭建成功。

3.1.2. 安装配置Yslow

Yslow 是Yahoo 公司的一个用于分析页面（基于Yahoo 14条评分原则）的工具，自动检测已装载的页面是否已按其14条评分细则所开发，然后给出相应得分与页面的详细情况。Yslow 是一个Firefox 浏览器的一个插件，安装、配置与使用都非常便捷，步骤如下：

1) 若没有Firefox 浏览器，下载安装Firefox 。下载地址：[2]

2) 由于Yslow 运行于Firefox 浏览器的插件Firebug 上，必须下载安装Firebug 。下

载地址：https://addons.mozilla.org/zh-CN/firefox/。

3) 下载安装Firefox 浏览器插件Yslow ，下载地址：https://addons.mozilla.org/zh-CN/firefox/。

4) 配置Yslow, 将Yslow 收集的结果发送至本地showSlow 平台，步骤如下：

A. 打开Firefox 浏览器，并在地址栏输入： about:config；

B. 确认警告信息后进行配置页面，在过滤器输入框中输入yslow 以查找yslow 相

关配置项；

C. 将如下配置项目设置如下值：

extensions.yslow.beaconUrl =http://--showSlow地址--/showslow/beacon/yslow/

extensions.yslow.beaconInfo =grade

extensions.yslow.optinBeacon =true

5) 重启Firefox 浏览器即完成Yslow 的安装配置。

至此，页面性能测试自动化工具Yslow 与收集分析性能测试结果的工具showSlow 均已安装配置完成，完成测试环境的搭建工作。

7

3.2. 测试实施

使用Yslow 进行页面性能测试的实施工作比较简单，只需打开浏览器并导航至相应的页面，然后运行Yslow 即可。在本测试案例中的测试系统首页访问特别慢，为确认其页面性能状况是否良好，对其首页进行页面性能测试，步骤如下：

1) 打开Firefox 浏览器，并导航于需要进行页面性能测试的系统

（http://localhost:8001/index.html?p_win=home）；

2) 打开Firefox 浏览器插件Firebug ；

3) 在Firebug 窗口，运行Yslow ；

4) 在Yslow 窗口即可见当前页面性能测试结果，并将测试结果发送至本地showSlow 平

台；

5) 如需要继续测试其它页面，打开相应页面再运行Yslow 即可；

6) 访问本地showslow 平台，查看分析所有页面的性能测试结果。

3.3. 测试结果分析

在本测试案例中仅对测试系统首页的页面性能测试结果进行分析。从showslow 平台对此系统首页的分析结果来看，果不其然，页面性能状况不太良好。页面全部加载完成需要0.986秒，页面整体得分仅为64分（总分100分），图3.1

为页面整体得分。

图3.1页面整体得分

从页面整体得分可以看出系统首页的页面性能情况不是很理想，现在对页面的各个测试项的情况进行分析，图3.2为各个测试项的得分情况。

8

图3.2各个测试项的得分

1) Make fewer HTTP requests测试点分数为1，原因是页面中的http 请求数过多。根据

yslow 分析其中69个请求可以尝试整合成3个请求：页面中的8个javaScript 文件请求可以尝试整合成一个请求；3个样式表文件请求可以尝试整合成一个请求；52个背景图片请求可以尝试整合成一个请求。据权威统计，HTTP 请求在无缓存情况下占去了 40 到 60 的响应时间，所以尽量减少http 请求是页面性能优化工作的第一步。

2) Add Expires headers测试点分数为0，原因是页面中的250个静态组件均没有设置缓

存，造成每次访问该页面时均需要重新向服务器请求并下载至浏览器。根据Yslow 分析，此页面没有设置缓存时，文件总体大小为4385.5KB ，合理设置缓存后仅为

304.2KB ，这对页面性能提升是相当可观的。为页面文件设置缓存，可以减少 HTTP 请求的大小和次数并大大减少数据的网络传输量以加快页面访问速度。

3) Compress components with gzip测试点分数为0，原因是页面中的44个文本文件均

没有进行压缩。根据Yslow 分析，如果页面文件使用Gzip 进行压缩，大概可以减少 70 的响应规模。

上文对系统首页的页面比较突出的性能问题作了详细分析，从测试情况来看，该系统首页的性能情况非常糟糕，对系统的整体性能影响很大。系统首页的访问并不需要作大量的业务逻辑运算，大部分时间都消耗在http 请求响应与网络传输过程中。访问一个大小为1.37MB ，共有438个请求和2425个DOM 元素的页面，响应时间为0.986秒。可见，对页面进行性能测试与页面优化是非常有必要的，对系统的整体性能提升有着不可替代的作用。

9

4. 报告总结

随着用户要求对Web 系统的功能更加强大、界面更加精美，Web 系统的页面也越来越复杂，页面也就越来越容易成为Web 系统的性能瓶颈。所以，非常有必要对Web 系统进行页面性能测试，并根据性能测试结果进行页面性能优化，以提升系统的整体性能表现。

对于页面性能测试的方法，推荐使用测试工具以提高测试效率与准确率。本测试案例中的Yslow showslow也是一个值得推荐的测试框架，此框架也可以进一步进行扩展，采用QTP 或 Selenium 等功能自动化测试工具进行页面自动导航浏览，并设置Yslow 在加载完页面后自动运行，这样即可实现页面性能测试的完全自动化。

参考文献：

[1] 张克东. 软件工程与软件测试自动化教程. 北京:[M].2002-2-1

[2] 网站页面性能优化的34条黄金守则 http://www.cnblogs.com 2010

10