我思故我在我有我精彩--liangqihui

爱欲追而情已逝,子欲孝而亲不待。人生的困苦又怎能用一个难字囊尽百味
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

[zt]前端性能分析工具:dynaTrace Ajax Edition

Posted on 2010-04-17 21:58  挥辉  阅读(547)  评论(0)    收藏  举报
前端性能分析工具:dynaTrace Ajax Edition

从John Resig的Deep Tracing of Internet Explorer了解到了这款刚发布的免费的前端性能分析工具,John Resig对其评价甚高:“I typically don't write about most performance analysis tools because, frankly, most of them are quite bland and don't provide very interesting information or analysis. dynaTrace provides some information that I've never seen before - in any tool on any browser.”[编译:我一般不随便写关于性能分析工具的东西,坦率地说,我感觉它们绝大部分都比较烂,根本不能提供任何有价值的信息和分析结果。不过 dynaTrac提供了一些我以前在任何其他工具上都没见过的东西。] ,哇塞!看这意思,John Resig认为这是他截止到目前见到过的最牛X的前端性能分析工具了呀!能写出JQuery的大侠肯定见多识广吧,可见这款dynaTrace Ajax的本事真不是盖的!那么,它到底有啥特别之处呢?“The tool is capable of tracing across JavaScript, through the native XMLHttpRequest, through the network request, and back to the handler that fires when the request is done.”[编译:这个工具可以跟踪JavaScript从执行开始,经过本地的XMLHttpRequest、发送网络请求,再到请求返回的全过程。]。果然很强大!更多的我这里就不多说了,权威人士们都说过了,这东西我也刚上手没多久,还谈不上有多深入的技巧可以分享,这里只是先挖个坑,喜欢的就自愿往里跳吧!

  

 

 

相关资源:

下载安装:dynaTrace AJAX Edition

这个小视频是个很好的开始:5 Minutes Demo >
除了上面John Resig那篇文章,这篇A Step-by-Step Guide to dynaTrace Ajax Edition是绝对不能错过的!

 

其他:

1. 这个工具是完全免费的,它还有一个孪生兄弟:dynaTrace Diagnostics,专门是用来跟踪服务器端性能的,两兄弟如果联合起来使用,就可以从头到尾,从前到后无所不能了!不过!!!那哥们是收银子的,而且估计身价不低。

2.官方已经承诺,未来会支持Firefox。

3. 最后这么好的东西,怎么不也得推荐一下!请猛击这一行!by 鼠标左键

 

作者:Justin
出处:http://justinw.cnblogs.com/
本文版权归作者和博

 

 

 

-------

 

Dynatrace AJAX Edition是我认为最为强大的Web Performance Profile工具。废话不说了,直接上图介绍其主要功能。

先用IE访问你需要profile的网站,例如google,可以点击dynatrace工具栏来启动。这时候dynatrace就开始记录这个网站触发的一切事件。

 

我简单测试一下,点击google map,并且搜索shanghai,然后回去看看dynatrace可以帮我们分析出什么。

 

这个是summary,主要包括几大数据:

1)url:所有浏览过的URL路径,每选择其中一个url,下面具体的内容也会根据当前选择的url变化

2)resources & network:所有资源文件的数目,多少是通过网络传输,多少是来自缓存。Network里面会说明花费在网络上的时间分布:DNS解析,建立连接,服务器响应,网络传输

3)JavaScript: 事件触发花费的时间分布,如onload,onclick等等。各个js文件执行时间分布。

4)Timeline:有个时间轴,可以非常清晰的看到CPU,网络,JavaScript执行,页面显示所花费的时间。

下面Timeline:

 

可以很清晰的看到时间具体的花费分布,以及什么时间触发了什么事件。双击时间轴上面的任何具体时间块,都可以看到具体的内容,我点击一段JavaScript执行时间段来作为例子。下面就是双击后看到的内容:

 

可以看到完整的调用顺序以及每个函数花费的时间,并且可以展开看到子函数的内容,同时也能看到源代码。所以这个对于发现性能问题是非常有帮助的,很容易让我们发现问题所在。

在Network里面,可以看到和HttpWatch类似的流水图。能看到具体请求和响应的header信息,同时资源内容也能看到。

 

在Hotspot里面,可以看到花费最多时间的JavaScript代码,这是个找到问题的非常快捷的方法

 

同时Dynatrace还能支持离线的分析,当关闭浏览器,它会自动保存搜集的数据在本地,并且提供导出和导入的功能,方便协同合作。目前,Dynatrace只能支持IE浏览器,不久的将来应该可以支持Firefox。好了,广告做到这里了,推荐大家用用,有什么心得也可以来分享。


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/Danwang/archive/2009/12/25/5077358.aspx