51testing论坛版主,专注于软件测试及测试吐槽,屌丝测试攻城师一枚。。。。。。。。。。。。。。。。。。。。。。。。。新浪微博:@没翅膀的飞鱼-------邮件交流:wzb_minitester@126.com------

性能测试笔记系列之六:web前端性能---提高前端性能方法及常用测试工具

上一篇 / 下一篇  2012-12-07 20:21:08 / 个人分类:性能测试

接系列之五,这篇主要介绍提高前端性能方法及测试前端性能常用工具,至于提高前端性能测试方法是我们作为测试人员通过使用前端性能测试工具测试出来哪个点影响了响应时间,通过分析建议开发人员来提高前端性能,至于做还是不做这里不做讨论。

提高前端性能方法:

提高前端性能方法的考虑点是基于一个完整的HTTP请求和响应各阶段,主要有两大思路:

1. 减少页面加载所需要的时间

2. 提升用户的观感,让用户觉得页面更快(即然页面尽快开始显示)

具体可通过以下方法:

1. 减少网络时间

1 >使用DNS缓存技术

使用DNS缓存技术能够让用户获得更快递DNS解析时间,一般而言,由于浏览器本身有一定的DNS缓存机制

2>减少需要传输文件的尺寸

减少需要传输文件的尺寸是个提升性能的方法。确保使用gzip压缩,尽量减小jscss文件大小,都可以起到减少需要传输文件尺寸的作用。

3>加快文件传输速度

使用cdn技术,即内容分发网络。使用户可以就近取得所需的内容,提高用户访问网站的响应速度。

这里简要介绍下CDN技术:CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。CDN有别于镜像,因为它比镜像更智能,或者可以做这样一个比喻:CDN=更智能的镜像+缓存+流量导流。因而,CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题,提高用户访问网站的响应速度。----为更好地理解CDN,让我们看一下CDN工作流程。当用户访问已经加入CDN服务的网站时,首先通过DNS重定向技术确定最接近用户的最佳CDN节点,同时将用户的请求指向该节点。当用户的请求到达指定节点时,CDN的服务器(节点上的高速缓存)负责将用户请求的内容提供给用户。具体流程为:用户在自己的浏览器中输入要访问的网站的域名,浏览器向本地DNS请求对该域名的解析,本地DNS将请求发到网站的主DNS,主DNS根据一系列的策略确定当时最适当的CDN节点,并将解析的结果(IP地址)发给用户,用户向给定的CDN节点请求相应网站的内容。

2. 减少发送的请求数量

1> 利用浏览器缓存 (上个系列讲到的web缓存技术)

Ø  保证服务器端返回资源的响应头带有缓存头信息,如Expires'Last-Modified''ETag''must-revalidate'使得资源可以被缓存

Ø  用引用方式使用样式表和js脚本

Ø  使更多的URI可以被缓存 。

2> 使用合并的图片文件

       当页面上包含许多小图片文件时,可以考虑将小图片文件合并成一个大的图片文件,在页面上使用css sprites技术将大图片显示为分隔开的小图片。在没有缓存的情况下,将许多小图片合并成大图片可以大量减少http请求数。 选择将哪些小图片合并成大图片需要综合考虑,如果某些小图片经常变化,而另一些相对稳定,则不宜将所有小图片合并成大图片,因为这样会导致大图片经常改变,从而无法利用了浏览器的缓存机制

3. 提高浏览器下载速度

1>js文件放在html文档的最后

在某些浏览器(如IE6)上,js文件的下载和执行会阻止其他页面资源文件的下载和执行,直到js文件下载和执行完成后,其他资源文件才能下载和执行。

2> 使用多个域名

 上篇讲到过:浏览器默认对同一域下的资源,只保持一定的连接数,即规定了每个客户端只能与每个服务器建立的连接数,当向同一域下的服务器请求资源过多时浏览器会阻塞过多的连接,增加响应时间。我们可以使用同一个站点使用多个域名的形式破除这个限制,提高性能。

4. 让页面尽早开始显示

1>  将样式表的引用放在html文档的开头

比如放在<head>标签中,这样可以让样式表在一开始就下载下来。

一旦样式表下载完成,浏览器可以使用样式表中的定义开始在屏幕上显示页面元素,另外,也避免了新样式可能带来的屏幕显示的重绘。

2> js的引用放在html文档的最后

 这样js文件的下载和执行会在所有页面下载完成后,不会阻止其他页面元素的显示,从用户观感上来说,js文件的下载和执行时间完全不会被用户感觉到。

5. 通过一些技巧优先把用户最关注的资源显示出来(这个由于涉及到用户的感官以及关注点,具体问题具体考虑)

以上这些方法作为测试人员个人认为我们没有决定用还是不用的权利,我们只能说建议,具体做还是不做要看开发人员更要看领导。

 

单端性能测试工具:

由于51testing插图很麻烦,就不具体介绍(有些也没有使用过),这里只说下具体有哪些工具可用,为以后留个念想,呵呵,想学习的话可以自己找资料。

1.      Firebug工具

Firebug是网页浏览器MozillaFirefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScriptCSSHTMLAjax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利,也可以作为测试人员测试web前端性能工具,针对Firefox客户端(浏览器)来说的,这个工具具体我没有用过,实际测试中都是只测试IE浏览器。

2.      HttpWatch工具

可在IEFirefox下使用的网页数据分析工具。这个工具实际项目中使用的较多,通过该工具可以查看网页摘要:Cookies管,.缓存管理,消息头发送/接受,字符查询,POST数据和目录管理功能,报告输出(各时间点以及页面总时间)。商家提供了两个版本,一个是免费的Basic版本,一个是Professional付费版本(稍老点的版本可破解),不过对于测试人员来说Basic免费版本足够了。

3.      Chrome自带的开发工具

关于Chrome浏览器就不介绍了,打开Chrome浏览器,选择“工具”->“开发人员工具”->Resources”,允许对该Session中的资源进行跟踪,在浏览器地址栏输入URL并访问,就可以得到我们想要结果,具体分析及参数含义可以查看相关资料。

4.      DynaTrace  Ajax  Edition工具

dynaTrace Ajax是一个详细的底层追踪工具,它不仅可以显示所有请求和文件在网络中传输的时间,还会记录浏览器RenderCPU消耗、JavaScript解析和运行情况等详细的信息,并根据一些预定义的规则给出一些建议和评分,具体可参考相关资料。

 

这里就介绍这几种吧,具体使用哪个工具,还是看具体项目需求,如考虑前端客户端(浏览器),以及测试的目的等等。

 

以上主要来来源于断念老师的书籍以及网上收集的资料。

写于2012-12-07       没翅膀的飞鱼


TAG:

 

评分:0

我来说两句

Open Toolbar