2010-4-19 作者:大灰狼堡森 《dynaTrace Ajax 教程 – 进阶篇》 大灰狼系列分享 1 《dynaTrace Ajax教程 – 进阶篇》 | 2010/4/19 《dynaTrace Ajax 教 程 – 进 阶 篇 》 大 灰 狼 系 列 分 享 PRE 在dynaTrace Ajax 使用指南-基础篇中,我们对dynaTrace 主要的功能进了一番介绍,在进阶篇中,我们将更深层的去了解如何使用dynaTrace 来分析更底层的问题,这将会对JavaScript 开发、调试和性能测试大有帮助。 说明 因环境差异每次追踪文件都会不同,为了保证本教程内所有内容一致行,请将本教程附带的step_by_step_google.dtas 文件通过 Import Session 导入,如下图: TimeLine 视图 – 进一步查看页面生命周期事件 打开TimeLine视图的方式很简单,我们可以通过双击左边树形菜单的TimeLine 节点来打开包含整个 session 所有信息的TimeLine 视图,如下图。 如果你只想查看某个 URL 的TimeLine,右键点击该 URL 后选择 Drill-Down TimeLine,如下图。 2 《dynaTrace Ajax教程 – 进阶篇》 | 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 行绿色的那条开始,之后在Netw ork 行相对较长的蓝色线表示XmlHttpRequest 请求,鼠标悬停上去有详细信息哈)。这里教大家一个小技巧,在实现线 3 《dynaTrace Ajax教程 – 进阶篇》 | 2010...