Web系统页面性能测试研究.doc

Web系统页面性能测试研究魏东辉（广东电网公司信息中心，广东 广州 510600）摘 要： 针对目前行业内专注于Web系统后台的并发性能测试而忽略了对页面的性能测试的现状，对Web系统的页面性能测试进行了研究，介绍了Web系统页面性能测试与其重要性，并阐述了Web系统页面性能测试的内容与方法。最后，通过实际应用案例，阐明了如何进行Web系统页面性能测试。为Web系统性能测试与性能调优提供了一个新的研究方向，相关的评测技术为Web系统性能测试、性能调优等方面有着实际的指导作用。关键词：Web系统性能测试;页面性能测试;YslowResearch of Web Page Performance TestingWEI Dong-Hui（Guangdong Power Information Center, Guangzhou 510600, China）Abstract： As in the current industry, most of us focus on the performance testing of backend system while ignoring the performance testing on the page; we study the web page performance testing. In this paper, we introduce the web page performance testing and its importance. We also introduce what should be tested in the web page performance testing and how to make it. Finally, we illustrates how to do the web page perofrmance testing by one practical test case.This paper provid a new subject for performance testing of the web system. And the related method of testing in this paper provides practical guidance for the web page performance testing.Key Words：Performance testing of web system; Web page performance testing; Yslow 随着Web应用系统的功能越来越强大，系统的界面越来越炫，用户不再怀念C/S架构系统的强大功能与华丽界面，B/S架构也成为系统开发者的首选。但是，由于系统开发商的良莠不齐以及系统的服务器、网络等资源的有限性，Web应用系统的性能问题仍然比较突出，对应用系统进行性能测试也显得尤为重要。然而，提起Web应用系统的性能测试，大家首先想到的是对应用系统后台的应用服务器、数据库性能测试，往往忽略了系统前端的页面性能测试。其实，页面的性能优化对于整个系统的性能提升起着非常重要的作用，特别是对并发访问量较大的事务处理型应用系统。1. 不可或缺的页面性能测试1.1. 页面性能测试概述Web应用系统可简单划分为系统前端与后台，系统后台一般包括包括应用服务器、中间件、数据库等，用来作业务的逻辑处理与数据存储；系统的前台指客户端即浏览器，用来进行页面的展示。Web应用系统的性能测试通常是指对系统后台进行并发压力测试，从而定位系统后台的性能瓶颈，主要集中于对系统业务逻辑处理的性能分析上，而对页面的性能分析涉及较少。页面性能测试则是针对于页面性能优化而开展的一种性能测试，目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议，最终提升系统的整体性能表现，提高用户体验满意度。可见，Web系统页面性能测试是相对Web系统后台测试的另外一种性能测试，是Web系统性能测试的一个重要部分。1.2. 页面性能测试的必要性相对于C/S架构的应用系统，Web应用系统所有数据都需要从服务器端下载，虽然浏览器有缓存机制，但客户每次访问仍然需要下载大量的数据。特别是用户对系统要求越来越高，除了要求功能完备，对界面的美观、易用性也提出了更高的要求，越炫的页面也就意味着页面中要包含更多的脚本、样式表、图片和Flash，页面的数据量也就越大，这对Web系统的性能提出了极大的挑战。曾经有个在线打印服务的应用提供商说他们的系统不需要关注系统性能问题，没有必要进行性能测试，因为他们可以购买足够多的服务器来支撑系统；不少业界同行也认为只要有足够多的服务器资源，性能就不会存在问题。其实不然，他们都只关注到了应用系统的后台性能表现，而忽略了页面对系统整体性能的影响。举个例子，当一个页面中包含几百个请求，页面中没有经过优化的javaScript文件、CSS 文件与图片件大小达到10MB，即使当前只有一个用户在访问该系统，页面的访问速度也会慢得惊人，纵使增加再多的服务器也不见得会有明显的性能提升。可见，对Web应用系统的页面进行性能测试和优化是非常有必要的。只有通过对页面的性能测试，发现页面存在的性能问题并根据性能测试结果进行页面优化以提升页面的加载性能，从而提升系统的整体性能。在应用系统高并发访问时，更能体现出Web页面优化后所带来的系统整体性能提升效果。2. 页面性能测试的方法2.1. 页面性能测试的内容每个Web系统的页面的组成部分大部相同，一般都包含html文件、javaScript文件、层叠样式表、图片等文件，而影响系统页面性能的正是这些文件或页面元素的编写不恰当、属性设置不正确、或使用方法有误造成的1。因此，系统页面性能测试的内容与系统后台并发压力测试不一样，页面性能测试不是在多用户并发情况下去发现并定位系统的性能瓶颈而是检查页面各文件或元素是否以最优的方式编写。各个开发商都有自己的一套标准去开发Web页面，业界也有不少页面优化的方法如Yahoo的34条“黄金守则”与Google的页面优化建议等。根据业界Web页面优化原则总结归纳出Web系统页面性能测试内容：1) 检查页面各个文件或元素是否合理使用缓存；2) 检查页面的http请求数是否已精简至最少；3) 检查页面是否存在错误请求与重定向请求；4) 检查页面的javaScript文件、层叠样式表、图片等文件是否通过合并、压缩等方式进行优化；5) 检查页面的DOM元素是否都是必要的，尽量减少DOM元素数量；6) 检查页面元素属性是否正确设置。以上则是 Web系统页面性能测试的大概内容，在实际测试过程中可以根据项目的实际情况参照其它页面优化建议对性能测试项目进行增删，目的是尽可能找出影响页面性能的因素，对页面进行优化以提升系统整体性能。2.2. 页面性能测试的方法一个业务处理型的Web系统所包含的页面往往是成百上千个，如果对每个页面都进行手工检查验证的话，那么对一个系统进行页面性能测试的工作量将是相当惊人的。为了对系统页面进行快速测试，推荐使用自动化工具进行测试，以提高测试效率与准确率。目前对Web页面进行性能测试的工具比较流行的有HttpWatch、IBM的Page Detailer Pro、Google的PageSpeed 与Yahoo的Yslow，在实际项目测试中可以根据项目的实际情况采用合适的辅助工具进行页面性能测试以提高测试效率。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下载地址：/p/showslow/downloads/list 。3) 创建showSlow数据库，并通过位于ShowSlow文件夹的tables.sql建立相应的数据库表；4) 配置showSlow平台，将showSlow文件夹下的config.sample.php重命名为config.php,并根据实际情况修改文件中$showslow_base、$db、$user与$pass的值；5) 至此，showSlow平台搭建完毕。重启apache服务器以让showSlow平台的配置生效，成功重启后，可尝试访问http:/localhost/showslow/以确认showSlow平台是否搭建成功。3.1.2. 安装配置YslowYslow是Yahoo公司的一个用于分析页面（基于Yahoo 14条评分原则）的工具，自动检测已装载的页面是否已按其14条评分细则所开发2，然后给出相应得分与页面的详细情况。Yslow是一个Firefox浏览器的一个插件，安装、配置与使用都非常便捷，步骤如下：1) 若没有Firefox浏览器，下载安装Firefox。下载地址：/。2) 由于Yslow运行于Firefox浏览器的插件Firebug上，必须下载安装Firebug。下载地址：/zh-CN/firefox/。3) 下载安装Firefox浏览器插件Yslow，下载地址：/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 =gradeextensions.yslow.optinBeacon =true5) 重启Firefox浏览器即完成Yslow的安装配置。至此，页面性能测试自动化工具Yslow与收集分析性能测试结果的工具showSlow均已安装配置完成，完成测试环境的搭建工作。3.2. 测试实施使用Yslow进行页面性能测试的实施工作比较简单，只需打开浏览器并导航至相应的页面，然后运行Yslow即可。在本测试案例中的测试系统首页访问特别慢，为确认其页面性能状况是否良好，对其首页进行页面性能测试，步骤如下：1) 打开Firefox浏览器，并导航于需要进行页面性能测试的系统（https:/loja.vodafone.pt /homephone/）；2) 打开Firefox浏览器插件Firebug；3) 在Firebug窗口，运行Yslow；4) 在Yslow窗口即可见当前页面性能测试结果，并将测试结果发送至本地showSlow平台；5) 如需要继续测试其它页面，打开相应页面再运行Yslow即可；6) 访问本地showslow平台，查看分析所有页面的性能测试结果。3.3. 测试结果分析限于篇幅，在本测试案例中仅对测试系统首页的页面性能测试结果进行分析。从showslow平台对此系统首页的分析结果来看，果不其然，页面性能状况非常差。页面全部加载完成需要49.798秒，页面整体得分仅为36分（总分100分），图3.1为页面整体得分。图3.1页面整体得分从页面整体得分可以看出系统首页的页面性能情况非常不理想，现在对页面的各个测试项的情况进行分析，图3.2为各个测试项的得分情况。1) Make fewer HTTP requests测试点分数为0，原因是页面中的http请求数过多。根据yslow分析其中69个请求可以尝试整合成3个请求：页面中的29个javaScript文件请求可以尝试整合成一个请求；19个样式表文件请求可以尝试整合成一个请求；31个背景图片请求可以尝试整合成一个请求。据权威统计，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% 的响应规模。4) Reduce the number of DOM elements测试点分数为0，原因是页面的DOM元素数量过多而没有进行精简，本页面中DOM元素共有2425个。一个复