转 WEB前端性能分析--工具篇

在线网站类：

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 

对几个网站的分析结果以下：

Google.cn 99分

Baidu.com 98分

360buy.com 98分

Taobao.com 89分

Dangdang.com 83分

补充：

其实这个更像是代码的白盒测试分析工具，由于其都是根据必定的规范来检测网页的优化程度，而不是实际的去监听和过滤页面访问所花费的时间。固然一个网页的加载时间和不少因素有关；好比网速，好比页面上的内容，不一样的网站加载时间确定是不同的，这个就每个用一个规则来肯定一个怎么的网站应该要多长的加载时间了，所以这只是一个最佳实践规则和建议的检测工具；还有一点就是若是想看页面访问时间的细节，firebug和chrome的开发人员工具自己就已经有了。

 

Speed Tracer

说明：

基于chrome的插件，一样是有google产的，这个是web前端页的性能记录和分析工具，同时还提供一个规则和建议的评测。

使用：

https://developers.google.com/web-toolkit/speedtracer/get-started 

补充：

这个工具收集的东西主要是资源或事件消耗的时间，它会实时的记录某个页面的加载过程，而且一直跟踪全部的事件；在易用性方面数据能够到出来，还有能够根据时间轴来分析具体某端的性能规则和建议。

 

 

Yslow

说明：

基于firebug的评测分析工具，yahoo产；和page speed相似工具，会给出页面的评分和优化说规则，同时会提供页面下载资源的统计分析功能，还提供了一些小工具，如js运行检测，图片的优化工具，未符合规则的资源有哪些等等。总的来讲是page speed的加强版。

Yslow优化建议23条规则：

http://developer.yahoo.com/performance/rules.html 

各网站的评分：

Google.cn 67分

Baidu.com 94分

360buy.com 77分

Taobao.com 70分

Dangdang.com 71分

 

 

 

独立程序类：

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，前者获取很是丰富的数据，后者则在服务端专门展现这些数据，即方便使用又方便存储。若是要支持持续测试的话，能够写自动化的脚原本跑具体的页面，每次新版本都执行一次自动化测试便可