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

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

相关文章：

web前端性能分析--实践篇