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

Web系统页面性能测试报告书 测试部门：软件研发部门测试人员 ； 王园兆10前言：随着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，在实际项目测试中可以根据项目的实际情况采用合适的辅助工具进行页面性能测试以提高测试效率。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，都是值得的。旧文章6. 把CSS放到顶部7. 把JS放到底部防止js加载对之后资源造成阻塞。8. 避免使用CSS表达式9. 将CSS和JS放到外部文件中目的是缓存，但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。10. 权衡DNS查找次数减少主机名可以节省响应时间。但同时，需要注意，减少主机会减少页面中并行下载的数量。IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。所以新浪会搞N个二级域名来放图片。11. 精简CSS和JS12. 避免跳转同域：注意避免反斜杠 “/” 的跳转；跨域：使用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+CSS18. 避免404有些站点把404错误响应页面改为“你是不是要找*”，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作JavaScript代码来执行。19. 减少Cookie的大小20. 使用无cookie的域比如图片 CSS 等，Yahoo! 的静态文件都在主域名以外，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。21. 不要使用滤镜png24的在IE6半透明那种东西，别乱使，淡定的切成PNG8+jpg22. 不要在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下载地址：/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浏览器，并导航于需要进行页面性能测试的系统（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为各个测试项的得分情况。图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 请求的大小和次数并大大减少数据的网络传输