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

51Testing软件测试网:C5p*T1x p
zFw)j0KXd

在线网站类：

(J
Zo.~[qqu0

WebPageTest51Testing软件测试网q5d K)zY$Wy+Ld

说明：

$o$x]:_yR%g#o0

在线的站点性能评测网站，地址http://www.webpagetest.org/51Testing软件测试网X
L U&QUG+E

51Testing软件测试网.Y9Z2f$[.N`:\
51Testing软件测试网3\j1n~Y|

ShowSlow

0f:IN8S5o|0

说明：51Testing软件测试网C1`-K d~&f:c)c4g)Q

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

5i_9Nl%e&Z&iw0

51Testing软件测试网$u(n`OM9Wl q6_0P)_

oOD@ j(DO"jW0

51Testing软件测试网 {7qC#rfQ
51Testing软件测试网|$FJQs

浏览器插件类： 

\#T`4? o8H'D0

FireBug

H,Y/l z\9T:S0

没啥好介绍的，都知道。

`4q'd+Y_
Y0{^-C0

51Testing软件测试网]%[.D:kwy

+C8naT!PQ
`0

Page Speed51Testing软件测试网{7fA"G&C{+c'~G

说明：51Testing软件测试网B%mC'O l+g)Q#Z'p7|B

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

z1D:kn;X w/M0

使用：

5LQ2[Z)X$d0

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

-D:p`F.k%V:K1oN0

51Testing软件测试网O;HI0g)RT

)\,EE3Zs#?0

补充：

5fB6nw@`]0

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

51Testing软件测试网S2j:l(z*J?%ZT%H'q
51Testing软件测试网IpCz!^I%C

Speed Tracer51Testing软件测试网-E+?_c6R

说明：51Testing软件测试网,vn&s;Rn
\Ta"j

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

Y {8_2x O0

使用：

GdX)im.^"Z0

https://developers.google.com/web-toolkit/speedtracer/get-started 51Testing软件测试网XZ v!p&O4S/IDy{

补充：

&O$eXeYj0

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

Vx*czi Gzzn8b0

} _pgt(R#Z&Y~051Testing软件测试网i!S J3^K1L}

Yslow

4^,~XoFm0

说明：

f |*^~ yFT)G1K0

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

i{K-cM{s0

Yslow优化建议23条规则：51Testing软件测试网 aYM9c0qiW\8K)A I|

http://developer.yahoo.com/performance/rules.html 51Testing软件测试网9s+|R/Ze4z
m6d

51Testing软件测试网-i
Q#I5`[W2N

jaN TU*r0

独立程序类：51Testing软件测试网B.m7}6y.|4k7QppT0Z ^

DynaTrace Ajax Edition

(humbfg;UZ1r0

说明：51Testing软件测试网"Y`LKu2YB!qO9Cb

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

l&]z8D9CM ~0

DynaTrace优化建议规则：51Testing软件测试网z#o Dx3|1p*{b4B/a

http://community.dynatrace.com/ext/ajax/PUB/Best+Practices+on+Web+Site+Performance+Optimization 51Testing软件测试网6L!R+p*s0B4c"o

51Testing软件测试网v8MVBAt!h3y+`

a/Y L i;A?\s0

Fiddler

'xm,Z9]1q-e0

说明：51Testing软件测试网Gu ?-O!Y.Bs

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

#y&z;G1c#A1l0

,ep y!O4[.o,d0

:AJ,|;tT:mc/X0

HttpAnalyzer51Testing软件测试网\&G L@N@?

说明：

g'LBn-]-B0

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

51Testing软件测试网j-O.iIT(Njl7r

-W x7Q*M$P"{3J&g0

HttpWatch：

oZha8h ~6W0

说明：

5M
Q9OrPB9B.f0

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

T G`'k4wYv1n8k0

/E"qZ@9\d dhrL^051Testing软件测试网C\+m5QD%U,A)t

总结：

&c#Y)pnE,PBQ{?0

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

!eazAD$@051Testing软件测试网HOwPL4PU

51Testing软件测试网}"_6h_2e

@^MnT:S5eu!b1O0

注：转载自网络。

9yi6o@)Zm5S0

51Testing软件测试网$KEY5N2D.o0l\\

51Testing软件测试网6l0?l$D x*G+g

51Testing软件测试网 pH`1O$C`K2|0Ic