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

51Testing软件测试网l-J7\$Y?FM

在线网站类：

(h8I9l1N&K\0

WebPageTest

5jIxPi ]0

说明：

iwzeop0

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

9BPu4nA4wMjA [0

)t$xN-E?r7q}'K051Testing软件测试网ks)\ L,@l

ShowSlow51Testing软件测试网EQ^ s)MP|9nL?#V

说明：51Testing软件测试网*nf;c@aQg

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

+z~T'O{7Z#I&Ym0

KEB!q c:RVDD0

7b#ZRl9C3]0

-eC1_[D&F051Testing软件测试网+sD i7x.B4G-|

浏览器插件类： 51Testing软件测试网)?){
vp"L

FireBug

Pa0pj(s%F6YI0

没啥好介绍的，都知道。

QN9t5jk tX;M0

51Testing软件测试网c^5z6KG-yS\

$_rhSW.lf
p0

Page Speed

F
q{Lh(Z0

说明：51Testing软件测试网qlf3e6f

基于firebug的web页面优化的评测工具，同时还有支持chrome的插件，因为是google产的。51Testing软件测试网[Bz
er`E'v

使用：51Testing软件测试网#[K"G,pYlq RT

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

51Testing软件测试网 lD8a5C'axg.v

)`J)N-Fk L0

补充：51Testing软件测试网B@-a1@&}]7N DrL

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

51Testing软件测试网D K0~e']Db

P)@ TD'o0

Speed Tracer

3N'^2a4mQFYk0

说明：

#V-liY&V6|&b0

基于chrome的插件，同样是有google产的，这个是web前端页的性能记录和分析工具，同时还提供一个规则和建议的评测。51Testing软件测试网
a"F&rpU7x+D(K

使用：

8a)i6l8L.t-J_
`0

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

j{"v'_%G){vfz0

补充：51Testing软件测试网&yH T1}Q+o [z1y*J}
j

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

N@6k pvz:GN0

kI@/IJ!|;T0

Yslow51Testing软件测试网"c~7s{o"]re

说明：51Testing软件测试网yN8dq7\ aaK

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

~+?@-h8k&g,S0

Yslow优化建议23条规则：

7P2U,Tc}\Ki;B0

http://developer.yahoo.com/performance/rules.html 51Testing软件测试网
R4WM.S"R4{xp]Y

51Testing软件测试网'xk i;rK%\

*eG"}e U0

独立程序类：51Testing软件测试网g,TS%FM5y*H

DynaTrace Ajax Edition51Testing软件测试网7E/Pi{Q'pFK;jW

说明：51Testing软件测试网 Wqi7br?R

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

Z|N5Gcb2{5bB0

DynaTrace优化建议规则：51Testing软件测试网jb M$_3N:v

http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization 

c.uX MBP(Uv ?`"^}0

k!}V8Mev?QS(|051Testing软件测试网#f/kG^IH,P

Fiddler

C_~`Ul @0

说明：

s$N;_1@)_!I0

Microsoft的一款web调试工具，它会记录所有本地的http通信。同时支持ie插件版51Testing软件测试网:zT*j(\YM!x

$b@"XR$T2?%de;b0

pkr5?.S?0

HttpAnalyzer51Testing软件测试网N\8n.wf_U!Z

说明：

GD;O1v)R"fgo]9@0

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

{ f)?8VCB }u*D0

51Testing软件测试网~FK5Td.Kf7y:z5L
51Testing软件测试网TT:U,or

HttpWatch：51Testing软件测试网,ulzE]XV6xNHr$U

说明：51Testing软件测试网a w oc {9l

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

]Cx Y}
uA:h0

5@f"E!CC3^$Jn0

`#pF;F4a;x[0

总结：51Testing软件测试网$?
t0J3{7fz

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

e4|gdZ
`0

dBa\}$WC
D\0

R1~r+n%A/B fAu0

:\%J+D Z\ h{?e Aa]0

!a(]I/L&Wxt0

注：转载自网络。51Testing软件测试网&e7EGf9Pj:IkK

51Testing软件测试网T;t$]K5B4~V'X&u

51Testing软件测试网7`\|g?Uf:V

51Testing软件测试网/l&G i]|W1N/q~3x

51Testing软件测试网v#Id4M!AWR

51Testing软件测试网W!E&N$nzgF'K

51Testing软件测试网.oS,Lg!Iej

51Testing软件测试网-g3vw;K;s&r