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

5E-]f;g2o|)Ki#|2z5gb0

在线网站类：51Testing软件测试网YF8S6F.uY"T+cK%G

WebPageTest51Testing软件测试网 MdVk!N9O

说明：

wHMW'f4\.j0

在线的站点性能评测网站，地址http://www.webpagetest.org/51Testing软件测试网[6w]2g%HY

51Testing软件测试网ZBr~'YaI*M;}.B

M ]!AP N KS_-x0

ShowSlow51Testing软件测试网q)v7O6bl(pG

说明：51Testing软件测试网%~3i7~ Q)B_[aR

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

u4Hs~DGKYL0

,{_1y(G,p R5{N,C,y051Testing软件测试网6mE/wZnP4vlC

51Testing软件测试网*?&E+e1U|z Dg

r*F#~,F-c`Q0

浏览器插件类： 51Testing软件测试网}W]L6g(g!Ed

FireBug

oy7m E2V]!H:[,m0

没啥好介绍的，都知道。51Testing软件测试网a
a"@4i9v
hs-i_/Z(F:Rh

51Testing软件测试网sZl
]N,Z-z3c'lXO

.r,W1zN/bCq!T6{0

Page Speed

|j5b
qX
e$op\g0

说明：

}t D$C&C/@0

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

w?l2^n~ r*a*M0

使用：51Testing软件测试网 W[1B3s |1xP x

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

gS$HKU7ub!e;r%n051Testing软件测试网;f"Uc5BZg^*z

补充：51Testing软件测试网2c,E#xLL~*o'e

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

;Jo)B!E/eKW;X'v W^0

B&P/s8jbc0

B4L'D^UG;A_!F0

Speed Tracer51Testing软件测试网i
oc2fYn3q0We

说明：

im!lKIt,I0

基于chrome的插件，同样是有google产的，这个是web前端页的性能记录和分析工具，同时还提供一个规则和建议的评测。51Testing软件测试网 vgHX,S*F0F'{

使用：51Testing软件测试网)r,kbd,G

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

's$~&`:GTN+ws0

补充：51Testing软件测试网unQY)\*xw

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

_.Yv4]
b0

51Testing软件测试网 x?X8}2BG4J
51Testing软件测试网0J2WM'h0OcE'?

Yslow51Testing软件测试网U*~I S'_'v

说明：51Testing软件测试网ljDE;v*AW.~!?j4]6K3}$B

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

Yslow优化建议23条规则：

c j+T+]es0

http://developer.yahoo.com/performance/rules.html 51Testing软件测试网2?L1aFg/k

51Testing软件测试网G8My%Q%uFb

D4L*l.B)X2Hmyn0

独立程序类：51Testing软件测试网 p*L'[1Z#L

DynaTrace Ajax Edition

6y ^!{P-y!i0

说明：

o6H8wHImg X0

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

1j;|wt3D'c@0

DynaTrace优化建议规则：

:Q5t3s[1U-[0

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

)v?2a^A'E0

51Testing软件测试网_/Z6A!kI0J;j(s.@

R$Cr|@2\Pvv0

Fiddler

L8C9ZFE0cx6T0

说明：

4{3S8t%P1[6G*Y8Q0

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

I;Ao A;J;e#~6@SA0

51Testing软件测试网x(u#y
X)t
x
51Testing软件测试网2jt ~C/?KM_N

HttpAnalyzer51Testing软件测试网NKT5{c{"x@

说明：

5_L*gri [*jb0

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

!`}6v}4U P:b0

$O4Q
] mnZK"G!O0

0m6G_4USeUP0

HttpWatch：51Testing软件测试网
E9y}P8ytqj@.}

说明：51Testing软件测试网8a b,aV2G;Sw

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

a)XzYr051Testing软件测试网0P o&m3?$K$G.e

总结：51Testing软件测试网7A],UX#\ {(ra P}

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

"d4~$RKI%n0

51Testing软件测试网8BC$A1w vn ?-c
51Testing软件测试网SgbW"XmD(rh

51Testing软件测试网8d6_R"qQ,Bn:s

4G7u"A"U u0

注：转载自网络。51Testing软件测试网;e;pE^
A_pg\e(r

51Testing软件测试网#\as]
Z\B:r.d

51Testing软件测试网$h3FI!h#K2@

51Testing软件测试网4xztZo1K%Lnd

51Testing软件测试网y,^KkS(f%ETM?

51Testing软件测试网 Zf[#^"I~:x G:m

51Testing软件测试网f
H#d$A1A!s