BAIDU
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 行绿色的那条开始,之后在 Network 行相对较长的蓝
色线表示 XmlHttpRequest 请求,鼠标悬停上去有详细信息哈)。这里教大家一个小技巧,在
- 1
- 2
前往页