登录 ×

梨花寨前端技术交流平台!

html,css,js,html5,css3等

前端性能测试工具

2013-03-08 17:08:37 | 浏览量:370

在线网站类:
WebPageTest
在线的站点性能评测网站,地址http://www.webpagetest.org/
其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点

ShowSlow
showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件、page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示。只需要在dynatrace安装目录下进行一些设置,即可自动实现上传结果到showslow平台作为存档、分析及监控。

浏览器插件类:
FireBug
它可以对页面进行调试,可以记录所有网页的访问耗时,下载的资源等。

Page Speed
基于firebug的web页面优化的评测工具,同时还有支持chrome的插件,因为是google产的。
直接打开FF的firebug或chrome的开发人员工具,切换到page speed标签,浏览一个网页然后点击分析即可,分析完成后会针对规则打出一个成绩,并告诉你哪些规则你没有符合。
其评分规则27条规则:
https://developers.google.com/speed/docs/best-practices/rules_intro

HttpWatch工具
HttpWatch工具是可在IE和Firefox下使用的网页数据分析工具。当然,在Firefox平台上已经有Firebug这个强大的工具了,在IE平台上,HttpWatch是个不错的选择

Speed Tracer
基于chrome的插件,同样是有google产的,这个是web前端页的性能记录和分析工具,同时还提供一个规则和建议的评测。
使用:
https://developers.google.com/web-toolkit/speedtracer/get-started
补充:
这个工具收集的东西主要是资源或事件消耗的时间,它会实时的记录某个页面的加载过程,并且一直跟踪所有的事件;在易用性方面数据可以到出来,还有可以根据时间轴来分析具体某端的性能规则和建议。

Yslow
基于firebug的评测分析工具,yahoo产;和page speed类似工具,会给出页面的评分和优化说规则,同时会提供页面下载资源的统计分析功能,Yslow 给出的网站性能评分是从 F~A,A 最优、F最差;还提供了一些小工具,如js运行检测,图片的优化工具,未符合规则的资源有哪些等等。总的来说是page speed的增强版。
Yslow优化建议23条规则:
http://developer.yahoo.com/performance/rules.html

独立程序类:
DynaTrace Ajax Edition
基于IE,firefox的插件,对于FF需要版本支持,需要独立安装文件(50多M)。其可支持到函数级的度量分析,此外其它工具能支持的功能这个工具都支持的。
DynaTrace优化建议规则:
http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization

Fiddler
Microsoft的一款web调试工具,它会记录所有本地的http通信。同时支持ie插件版

HttpAnalyzer
和fiddler原理一样的工具,不过功能比fiddler更加易用。同时支持ie,ff插件版,此外独立版程序提供http调试功能,写基于http通信的程序使用这个调试比较不错,之前写接口测试工具时就用的这个调试的。

HttpWatch:
以前这个和httpanalyzer都用过,后来就只用后者了;今天突然发现放弃它的原因是它只支持插件版的,即只能在浏览器上使用,而且只能抓对应浏览器的http通信,且不支持http通信的调试;不过现在发现了一个比httpanalyzer好的就是它的页面加载用时的统计功能,是可以统计一个页面总用时什么的,所以这个工具更适合用于站点的页面性能分析。

总结:
这些个工具里有些类似,有些用处各不相同,有些事专门的web前端性能评测工具,有些并不是为了web前端性能而做的工具。如果是通常意义上的web前端性能测试的话,可以选择一个固定的方案,比如:DynaTrace + showslow,前者获取非常丰富的数据,后者则在服务端专门展示这些数据,即方便使用又方便存储。如果要支持持续测试的话,可以写自动化的脚本来跑具体的页面,每次新版本都执行一次自动化测试即可。

附上一些指标以及说明: 
前端性能指标: 
1. Dynatrace时间: 
 1、首次显示时间(Time to First Impression):在浏览器地址栏输入URL按回车到用户看到网页的第一个视觉标志为止。 
 2、onLoad事件时间(Time to onLoad Event):这个时间是直到浏览器触发onLoad事件的时间,当原始文档和所有引用的内容完全下载后才会触发这个事件 
 3、完全载入的时间(Time to Fully Loaded):等于直到所有onLoad JavaScript 处理程序执行完毕,所有动态的或延迟加载的内容都通过这些处理程序触发的时间

2.页面大小: 组成页面的所有资源总大小,图像/css/js的大小也可以单独成为一个指标。
3.请求数量: 从网站下载资源时所有网络请求的总数,尽量少。
4.网络方面的指标(yslow中的一些指标的意义): 
1、DNS时间:托管网站资源的每个域名都会发生一次DNS查找,如果你在多个网页之间移动,当前一个页面已经请求过一次DNS查找后,浏览器不会再对同一个域名请求另一个DNS查找,但通过查看总体DNS时间,可以确定是否存在DNS查找时间问题,有可能牵出DNS配置不当的问题。 
2、连接时间:根据浏览器和资源的大小不同,浏览器可能会在域名上建立一到多个连接,连接时间就是浏览器与Web服务器建立TCP/IP连接的时间,连接通常会保持打开状态,除非Web服务器命令浏览器关闭连接。当使用SSL建立安全通信时,连接时间也包括SSL握手的时间,连接时间过长有以下原因:到Web服务器的网络连接速度较慢,使用了SSL,不允许浏览器保持连接打开。 
3、服务器时间:高服务器时间意味着Web/应用程序服务器需要很长的时间处理请求,监视服务器时间对于找出性能瓶颈和应用程序的扩展问题是至关重要的,通过增加Web服务器实现负载均衡,使静态内容的扩展是很容易的,当然也可以购买CDN加速服务来达到同样的目的,但以这种方法实现动态应用程序扩展就行不通了。 
4、传输时间:这个时间与传输内容的大小,浏览器与服务器之间的连接速度紧密相关,保持低传输时间是确保页面快速载入的关键,可以通过减小总的页面大小,或者通过CDN将内容放在离最终用户较近的地方改善传输时间。 
5、等待时间:等待时间与相同域名下资源的数量直接相关,受浏览器同一域名物理网络连接数的限制,访问某个资源时可能必须等待另一个连接的释放,减少资源的数量,或将资源分布在多个域名上,可以有效减少等待时间。 
6、域名的数量: 托管网站资源域名的数量也很重要,因为它会影响DNS,连接和等待时间,要下载的资源使用额外的域名将会直接减少等待时间.

需求及问题提交:

点击图片更换数字

0.4982s