dynaTrace Ajax：前端性能分析利器(3)

　　网络请求并行下载耗时，一方面来自请求的数目太多，其中一个比较明显的就是有一个 XMLHttpRequest 花在 Server 的处理耗时将近 7 秒的时间

　　Event 轴显示了鼠标点击事件，XMLHttpRequest 事件和 OnLoad 事件

　　放大右边网络请求时间比较长的部分(在我的例子中，从 16s 到 29s 时间片 ), 通过在开始处点击鼠标左键拖拽到结束位置松开鼠标拖拽，视图将放大到下面截图中显示的时间片上，如下图 8 所示 :

　　图 8. 放大时间轴

　　通过放大的时间片右键选择“Drill Down to Timeframe e”进入 PurePath 视图，显示当前所放大的时间片上所有的活动。

　　PurePath( 路径视图 ) - JavaScript、DOM 和 Ajax 问题的详细说明

　　可以通过双击 Cockpit 面板中的 PurePath 节点打开也可以选中时间轴上的一段右键选择“Drill Down to Timeframe ”来到 PurePath 视图，进一步进入每个动作去观察哪些事件触发执行了 JavaScript 和哪些函数的执行耗时比较长。

　　这里接着上节所述进入 PurePath 视图 , 如下图所示：

　　图 9.PurePath 视图

　　鼠标点击上图中的第二个时间片即 JS 占用 14 秒的，面板同时会更新当前所选活的信息，显示 JavaScript 代码执行过程，包括每个方法的执行时间和调用的参数及返回值。我们不仅可以看到 JavaScript 方法，也能看到 DOM 访问和 Ajax 请求。

　　从详细信息栏我们可观察到

　　1.Start : 一个活动的开始时间

　　2.Duration[ms] : 活动的持续时间，包含子树的活动时间

　　3.JS[ms] :JavaScript 执行总的耗时，包括异步的子树执行时间但不包括等待时间

　　4.Total[ms] ：活动本身从开始到结束的持续时间 , 不包含子活动的执行时间

　　5.Exec[ms] ：活动本身执行时间，不包括其子活动的需要的时间

　　6.Size : 树中总的节点数，包含所有子活动的节点数。

　　鼠标点击上面任何一列可进行排序操作，根据 JS 执行时间长短通过鼠标点击展开也可以通过右键点击“扩展子树”展开层次图找到是哪个方法的调用导致执行了这么长的时间。从上图调用栈中可看出 contentDomHandle 来自应用程序的 JavaScript API 的调用总耗时最长，从它的子树中可观察到 JavaScript 执行的时间分布：

　　1.addContextMenu

　　方法执行次数比较多，虽然方法本身的执行时间 150ms，但调用次数比较多的话就会导致总的执行时间比较长。

　　2.SimulateSlideClick耗时2.5 秒

　　3.concord.util.events.publish耗时3 秒

　　为了更方便发现这些函数的性能问题，可以右键 contentDomHandle 方法，选择“Drill Down->Hot Spots ”进入 HotSpots 视图 。

　　另外，PurePath 视图提供了多种分析方法，您可以通过直接键入您要查找的内容来筛选或查找您需要的数据项，也通过右键菜单或工具栏按钮添加过滤规则可以让软件只显示特定信息。

　　HotSpot( 热点视图 ) - 哪些地方降低了性能

　　综上所述，可以从 PurePath-->Drill Down 进入该视图，也可以从面板中直接打开 HotSpot 视图来分析浏览中访问过的所有 JavaScript、DOM 和页面渲染操作。

　　接着上一节的 contentDomHandle () 方法调用为例，如下图所示：

　　图 10.Hotspot 案例视图

　　从上图中可以看到每个方法的调用次数，JS 的执行时间以及总的执行时间等信息：

　　1.Back Traces 栏显示了由谁调用了这个函数，调用了几次，从上图可看到该方法被 Dojo 的 调用了 2 次，而方法本身调用的执行时间很短只有 3ms(Exec[ms])

　　2.Forward Traces 栏显示了这个方法又调用了哪些函数，Invocations 表示该方法总共被调用了几次;活动总耗时 12.7s(Total[ms]),Exec[ms] 表示方法本身执行所需要的时间，JS[ms] 总的 JavaScript 的执行时间。

　　3.界面底部显示了在 Back Traces 树或 Forward Traces 树中选中的 JavaScript 的源码

　　从我的例子中，就会很明显的发现如下性能问题：

　　1.addContexMenu(

　　) 被调用了 30 次，JavaScript 执行消耗了将近 7 秒。根据了解这个方法的作用就是为每个 Slide 添加右键菜单，也就是说文件包含 30 页就会被调用 30 次，这样不仅会增加浏览器的执行时间，也会占用比较多的内存。

原文转自：http://www.uml.org.cn/Test/201309062.asp