右击 -> 查看源文件,和其他一些前端性能测试技巧

发表于:2012-5-29 10:36

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:薛定谔的破猫    来源:51Testing软件测试网采编

  最近读了Steve Souders的High Performance Web Sites: Essential Knowledge for Frontend Engineers(O’Reilly, 2007),这本书的副标题是 “14 Steps to Faster-Loading Web Sites”。在你发现此书面向对象为开发人员,从而停止阅读之前,考虑以下几点:

  ● 作者的研究表明,网页响应时间约80%-90%是由前端设计决定的。而我的经验中,这个数字更应该是50%-80%,但我的经验多来自于那些被重新设计为WEB架构的多用户应用,或者是那些有着严重后端性能问题的应用(请我来定位问题)。

  ● 和性能测试人员有关的几乎所有的工具、培训、文章和会议,都集中在系统的后端。以至于大部分人认为,系统的前端性能无需担心,因为我们无法控制客户端的系统。

  ● 根据我的经验,网站的前端设计和开发,几乎不会考虑到性能问题,除了尽量减小图片的大小。我也从未让团队做过客户端页面的HTML代码审查,从未在这些代码上做过单元测试,也从未见过测试人员有意的对HTML进行一些性能测试。

  结合上面几点,你将得知,没有人关注页面上的可能存在的性能优化,而这种优化很可能是最容易实现,效果却又最明显的。读了这本书我发现,我经常对大多数的前端性能问题进行测试,但自己却没有意识到。作者提到的一些内容,我可能永远也不会想到去测试,不对这些内容进行更主动的测试是个错误,这些测试的成本是非常低的,无论是在时间上,还是在所需的工具和资源上。实际上,在测试网站的时候,我经常拿出整个性能测试的前15分钟来完成大部分的前端测试,虽然我承认,15分钟只够测试几个页面。

  通过这篇文章,我讲解了如何通过手工、负载生成工具、网络协议分析工具、助手网站以及浏览器插件,来进行测试。我已经通过以下免费工具(不是免费试用版,是无任何限制的免费版)完成了这些工作。如果你的公司不允许使用免费软件,我相信只要简单的搜索一下,就可以找到一堆可以替代的工具,这些工具将花费你公司足够多的钱,从而让他们重视。(如果你认为这只是个笑话,很可惜它不是。在咨询过我的团队和接受我培训的个人中,有超过50%的人说过不允许在公司的机器和网络上使用免费、开源、共享、甚至是有时间限制的免费试用版软件。)

  ● 免费或者开源的负载生成工具

    ○ JMeter (http://jakarta.apache.org/jmeter/)
    ○ WebLoad (http://www.webload.org/)
    ○ OpenSTA (http://www.opensta.org/)

  ● 免费或者开源的网络协议分析工具

    ○ Ethereal (http://www.ethereal.com/)
    ○ Fiddler (http://www.fiddlertool.com/)

  ● 免费的浏览器插件

    ○ Firebug (http://www.getfirebug.com/) with YSlow (http://developer.yahoo.com/yslow/) for    Firefox
    ○ HttpWatch (http://www.httpwatch.com) for IE

  ● 免费的助手网站

    ○ Web Page Analyzer - from Website Optimization: Free Website Performance Tool and Web   Page Speed Analysis (http://www.websiteoptimization.com/services/analyze/)
    ○ Gomez Instant Site Test (http://www.gomez.com/info_center/instant_test.php)

  有了这些,让我们来看一些你只需看完本文能做的测试,这些测试只需在web层面上即可进行,却可能会显著的改善终端用户的响应时间。

  HTTP请求数

  页面的获取不是在一个事务中完成的。通常HTML文件需要一个请求,样式表需要一个或多个请求,外部脚本需要一个或多个请求,图片、多媒体内容、以及第三方那个内容如广告等需要多个请求。即使很多对象已经存在于浏览器缓存中了,还是需要频繁的向服务器发送请求,以确认缓存中的对象是否“fresh”。这意味着页面上的每一个对象都十分可能会增加负担,进而在用户视角上降低了了性能,即使客户端的浏览器已经缓存了所需的对象。如下几种途径,可以确定页面发送了多少个请求,以及请求的内容。

  无论你用哪种方法,你将首先清除掉浏览器的缓存,或者访问页面两次(一次通过ctrl + F5来强制刷新缓存)以确保能够看到所有的请求。因为这些方法只能收集到真实的请求,如果不清除或刷新缓存可能会导致一些遗漏,让你以为没有去请求一些样式表、脚本、图片和多媒体内容,很多配置或条件会对此产生影响,而你可能不知道要去设置这些。

  1、如果你使用了负载生成工具或者网络协议分析工具,你可以直接开始录制了,然后浏览感兴趣的页面。在你录制的内容中寻找“GET”语句,看一下请求了什么。记住,有些工具,录制下来的脚本默认只显示基础的HTML请求,不包括子请求(对样式表、图片、脚本等的请求),如果要看到所有的请求需要进一步的设置。

  2、如果你的测试环境允许装浏览器插件,那么有好几种方法可以使这个工作变得简单。根据你所用的浏览器,或者希望测的浏览器,我推荐:

  a)FireFox:FireBug+YSlow

  b)IE: HttpWatch

31/3123>
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号