WEB前端性能分析--工具推荐。

51Testing软件测试网gHZ;BN8zt9IJ

在线网站类：

'r9k5`Q"M7K0

WebPageTest51Testing软件测试网A"A9K-^8nM

说明：51Testing软件测试网9r4l.vs9X,Ti

在线的站点性能评测网站，地址http://www.webpagetest.org/

5F.g!o.` P2Pm&C0

51Testing软件测试网d#a|`/@y'q

U5R?jI)N8U `0

ShowSlow

&{%d hf#p0

说明：51Testing软件测试网h[ Q.jl0u+jI

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

}ndV1\gW051Testing软件测试网7u3uR-X6J|

kUs1p;uG~l}G051Testing软件测试网&[4g:|emK6b

浏览器插件类： 

Y#GW8L}e_QT0

FireBug

t7ey ?'h ^@0

没啥好介绍的，都知道。51Testing软件测试网d8Cx8G%A-[q lsJ

%mV y6c1`)l0

X
P:D0ZVI0

Page Speed51Testing软件测试网0S3T(Z n$n(@

说明：51Testing软件测试网3z4g,o,XK

基于firebug的web页面优化的评测工具，同时还有支持chrome的插件，因为是google产的。

.RX'G#T|0

使用：51Testing软件测试网'Y9CR7f?;x

直接打开FF的firebug或chrome的开发人员工具，切换到page speed标签，浏览一个网页然后点击分析即可，分析完成后会针对规则打出一个成绩，并告诉你哪些规则你没有符合。51Testing软件测试网5['AG6}%t-?*Y3`

)g6Bs8~ s!e] ?0

b+FD{.Rv0

补充：

8sezX+^0

其实这个更像是代码的白盒测试分析工具，因为其都是根据一定的规范来检测网页的优化程度，而不是实际的去监听和过滤页面访问所花费的时间。当然一个网页的加载时间和很多因素有关；比如网速，比如页面上的内容，不同的网站加载时间肯定是不一样的，这个就每一个用一个规则来确定一个怎么的网站应该要多长的加载时间了，因此这只是一个最佳实践规则和建议的检测工具；还有一点就是如果想看页面访问时间的细节，firebug和chrome的开发人员工具本身就已经有了。51Testing软件测试网H&kjY/lR#n2M

t{ Q$KD'd0h"yC~
M0

4Q?N3OBK/jL0

Speed Tracer

VUc fK/l?0Q0

说明：51Testing软件测试网1k0MgGHY/Z

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

F2l;c)|~-Yq0

使用：51Testing软件测试网x-wy!r"v.O$p\L9qQ

https://developers.google.com/web-toolkit/speedtracer/get-started 51Testing软件测试网1i9r.N DSS4k

补充：

Sy,N{)YCg0

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

$P"lp,z7?]%|$JH0

1np1yt#DMC051Testing软件测试网0x3t?)~ Z3a

Yslow

o^0zJ#Ya0

说明：51Testing软件测试网-DN[5E8X

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

Yslow优化建议23条规则：

1EJ1N tv;?j0

http://developer.yahoo.com/performance/rules.html 51Testing软件测试网sK3P2v?cKF

51Testing软件测试网K9SC? P`

1|d;tw(W~(I.r0

独立程序类：

l-h#}3M4A%p*LbX0

DynaTrace Ajax Edition

.HA(dJXyd0

说明：

J2i_BD/I0

基于IE，firefox的插件，对于FF需要版本支持，需要独立安装文件（50多M）。其可支持到函数级的度量分析，此外其它工具能支持的功能这个工具都支持的。

1wj3rEp.h9d+h0Ke0

DynaTrace优化建议规则：51Testing软件测试网$dx,My0c5ffYl

http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization 51Testing软件测试网7n%cd&g
e3{

P,S?|6nz0`0

uIA igZXj0

Fiddler51Testing软件测试网N1g;r_WiM/Em
nQ2u

说明：

nqQ\,B0

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

zT]{\;p:AtW0

n+et"w eX*E3J051Testing软件测试网 u? I(O X
Ov$G3J2HTyoq

HttpAnalyzer

8@\j"pH
{vA)O0

说明：51Testing软件测试网:dMJ*j-Y8dCm

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

S"]P u(wbi6d)[0

-D7_
eGR0w051Testing软件测试网;M~"ASflxr

HttpWatch：51Testing软件测试网Uz rUc-AV@HS6~

说明：51Testing软件测试网)e@F`2{D|

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

51Testing软件测试网'f(mw0RF}
51Testing软件测试网@ c$}/SG [

总结：

7o&c4} xw_ie)e(^{0

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

y(F0K3b5S:y#VM0

51Testing软件测试网 E{&q}EN
@"a%M
51Testing软件测试网EQaX\A;ES

51Testing软件测试网0hj!k{gUe
51Testing软件测试网1{]5C@n&bL1]o,M

注：转载自网络。51Testing软件测试网.A2}[G#fn

51Testing软件测试网1eyVSX8b-w

51Testing软件测试网3I~[+WR{

51Testing软件测试网Su.Hck&un2?/[

51Testing软件测试网uF!],wN|k

51Testing软件测试网BUiam

51Testing软件测试网1~7r&g+c3[7j

51Testing软件测试网f-~ a(X9Y:~