dynaTrace使用分享-进阶篇

2010-4-19作者:大灰狼堡森《dynaTraceAjax教程–进阶篇》大灰狼系列分享1《dynaTraceAjax教程–进阶篇》|2010/4/19《dynaTraceAjax教程–进阶篇》大灰狼系列分享PRE在dynaTraceAjax使用指南-基础篇中，我们对dynaTrace主要的功能进了一番介绍，在进阶篇中，我们将更深层的去了解如何使用dynaTrace来分析更底层的问题，这将会对JavaScript开发、调试和性能测试大有帮助。说明因环境差异每次追踪文件都会不同，为了保证本教程内所有内容一致行，请将本教程附带的step_by_step_google.dtas文件通过ImportSession导入，如下图：TimeLine视图–进一步查看页面生命周期事件打开TimeLine视图的方式很简单，我们可以通过双击左边树形菜单的TimeLine节点来打开包含整个session所有信息的TimeLine视图，如下图。如果你只想查看某个URL的TimeLine，右键点击该URL后选择Drill-DownTimeLine，如下图。2《dynaTraceAjax教程–进阶篇》|2010/4/19这将会打开针对于某个URL请求的TimeLine视图，并且会自动分开显示不同域（domain）的网络请求。在工具栏和上下文菜单中，你可以开启一些可选选项，比如内容类型着色、JavaScript触发器或显示附加的事件（如鼠标移动、鼠标点击、键盘按键等）。在下图中就是一个带有附加选项的TimeLine视图：在这个视图中，我们可以了解到：网络请求是并行从6个不同的域中下载的。在onLoad事件触发前使用了6.5s(通过小IE标志能看到)从maps.gstatic.com下载的main.js用了2.42s（鼠标停留在上面会有更详细的资料）紧接着main.js，我们可以看到，脚本实际运行时间是1.1s，期间有两个下载（1s，红色线JavaScript行）和2个附加的JavaScript执行（2s）CPU行显示了运行期间CPU的使用情况事件行显示了我们的鼠标点击事件、XmlHttpRequest事件和onUnload事件有关信息。首先让我们放大从第一次鼠标点击到XmlHttpRequest请求之间的TimeLine。在这个例子中就是从11s到12s之间的部分（从JavaScript行绿色的那条开始，之后在Network行相对较长的蓝色线表示XmlHttpRequest请求，鼠标悬停上去有详细信息哈）。这里教大家一个小技巧，在实现线3《dynaTraceAjax教程–进阶篇》|2010/4/19上如果想放大某一段，用鼠标在起始时间按住，然后托到终点时间，之间的部分就会被放大。从又往左托会缩小。如下图所示。（用鼠标滑轮也可以放大缩小）TimeLine现在显示了鼠标点击事件、一个XmlHttpRequest事件，紧接着一个onError和另一个XmlHttpRequest(XHR)。用鼠标悬停在事件上将会显示哪些DOM元素触发了什么事件。在JavaScript行上悬停将会看到执行事件句柄（EventHandlers）使用了多长时间，在Network行上悬停显示哪些附加资源被下载。我们还能看到浏览器进行了哪些类型的呈现（Rendering）。在本例中，我们可以了解到：第一次鼠标点击引起了附加的内容被下载---包括另一个JavaScript文件（来自maps.gstatic.com）。当这个JavaScript文件下载后就立刻执行，并且触发到一个XHR请求。我们也可以知道onError时间句柄被触发和运行的时间为240ms。PurePath视图–解决JavaScript、DOM和Ajax的问题在TimeLine视图(TimelineView)中我们可以更深一层的了解浏览器和网络的活动，了解哪些JavaScript被真正的执行，谁触发了XHR请求。如果你右键点击TimeLine，你可以选择“DrillDownToTimeFrame”，这将会进入到PurePath视图来显示当前被放大的TimeLine片段内的所有活动情况，如下图所示：4《dynaTraceAjax教程–进阶篇》|2010/4/19在上面的视图中我们可以看到选择的TimeLine片段内所有的浏览器的活动，包括Script标签或事件句柄触发了哪些JavaScript的执行，还有网络请求和呈现的时间。当一些定时器（timer）或Ajax请求被触发时，对应的行会被高亮显示，最右边的Stats列显示了相关的信息。其它的大家可以自己尝试，内容很丰富很强大。在PurePath列表中选择一个活动将会更新下面的相关视图。PurePath树显示了JavaScript的真实的运行路径，包括不同方法的执行时间、参数、返回值。其中不仅有JavaScript方法，还包括进入DOM和通过XHR调用Ajax请求的详细信息。让我们退回一步到之前说到的TimeLine视图。我现在对这个发送的Ajax请求感兴趣。双击左边的来进入它的PurePath，即追踪到的执行这个XHR的JavaScript详情，如下图：在上面我们能看到这些代码所属的JavaScript文件。在树视图中我们能看到所有的JavaScript追踪，其中就有我们要找的触发XHR请求的方法，包括参数。Duration列告诉我们JavaScript总共运行了1127ms（最上面的一条，树根处），包括等待XHR请求返回和等待JavaScript定时器(timer)的时间。右键NetworkRequest节点（就是介个）选Details打开细节视图，将会显示Http请求和响应的头、请求链接、等待、服务器处理和数据传输的精确时间，也包括从服务器返回的真实内容。如下图所示：5《dynaTraceAjax教程–进阶篇》|2010/4/19比较有趣的是，在这个请求使用了372ms响应一个空JSON对象。从这里我们可以继续分析AJAX响应究竟做了些什么。在PurePath树中我们找到图中所示的节点，可以看到onreadystatechange句柄。下图显示了树中的这个句柄和右下角的真正的源代码。6《dynaTraceAjax教程–进阶篇》|2010/4/19我们可能对左下角的contributor列表比较感兴趣，它显示了所有选择的子树（或节点）中所有的JavaScript活动。双击contributor列表中的某一项，会自动定位到对应的树节点。，让我们双击contributor列表中的settimeout节点：在这里我们能观察到：一个定时器(Timer)用了740ms触发到一个timer句柄。一个标签被动态的创建，并添加到headDOM元素中，用以告诉浏览器在执行结束后下载这个脚本。PurePath视图提供了不同的方式来分析数据。你可以通过直接用键盘输入关键字来过滤和搜索每张表或树中想要的内容。7《dynaTraceAjax教程–进阶篇》|2010/4/19Network视图Network视图显示了在整个浏览器session内或不同页面内的所有网络请求。在左边树形主菜单中通过双击Network节点可以打开Network视图。我们能看到不同项目的颜色不同，越红越暴力的表示请求时间越长。默认情况下会以TimeLine上的发生顺序来排列，你可以点击任何一列来进行排序。比如你看，我可以酱紫把最红最暴力的都放到前面，如下图所示。对于不同的请求（列表中不同的条目）我们可以看到它是否来自浏览器缓存（通过Cached列）请求的类型（Network或Ajax）HTTP状态MIME类型8《dynaTraceAjax教程–进阶篇》|2010/4/19大小等等等等（不一一列了，太多了）对于每一个条目，鼠标右键可以点PurePath进入到PurePath视图。Hotspot视图–最慢最影响性能的地方在哪里？最后一个有趣的视图是Hotspot视图。通过老地方打开（左边树形做菜单，找不到的话估计你也看不到这儿了），也可以通过Summary视图中某个URL的右键菜单中进入到某个URL的Hotspot视图。我们前者打开来看看所有我访问过的页面的JavaScript、DOM、Render活动：上面的表格中统计了所有JavaScript、DOM和Rendering的活动（Activity）。我们能看到一共有103个会话活动、946个Reflow活动和1293个div标签上的匿名函数调用。双击上面的表格中的某一项，会看到相应的BackTrace和ForwardTrace，其中BackTrace显示了谁引发了所选的活动，而ForwardTrace显示了这个活动触发了哪些其它的活动。点击BackTrace或ForwardTrace中树的节点，会在最下面显示相关的JavaScript源代码。9《dynaTraceAjax教程–进阶篇》|2010/4/19Bosn的总结本文对dynaTraceAjax的功能进行了更深入的讲解，包括所有的视图介绍（Purepath视图、Network视图、Hotspot视图等）。熟练的使用这些工具将会对开发和性能优化有所帮助。希望本文能帮助到大家，谢谢。如果文中有误，欢迎批评指正。Hi:bosnmaE-mail:[e-mail]感谢您阅读大灰狼系列分享文档。参考文献：《dynaTraceAjax教程–进阶篇》|2010/4/19