标签：
dynaTrace Ajax Edition 是一个强大的底层追踪、前端性能分析工具，该工具不仅能够记录浏览器的请求在网络中的传输时间、前端页面的渲染时间、DOM 方法执行时间以及 JavaScript 代码的解析和执行时间，还可以跟踪 JavaScript 从执行开始，经过本地的 XMLHttpRequest、发送网络请求、再到请求返回的全过程。dynaTrace Ajax 目前有两个版本，免费版和商业版
dynaTrace Ajax 安装和使用
图 1. 安装好的操作界面
点击中间齿轮状的图标可对工具的属性进行配置，如下图 2 所示：
图 2.Preferences( 属性配置 )
从上图的：
可以通过两种方式启动 DTA 跟踪您的页面：
图 4. 浏览器启动
此外，在实际的操作过程当中，可能会需要跟踪打开页面后的一系列操作（例如点击某个按钮触发的事件等）, 免费版的 dynaTrace 跟踪的信息不能按照 Page 或者 Action 自动进行分离，这种情况下，我们可以通过在操作过程中通过添加标记 (Insert Mark ) 的方式从 PurePath 视图中来区分每个 Action 行为的时间分割。即在操作前添加一个标记，操作完成后再添加一个标记，再从 PurePath 视图中分析所添加标记之间的比较耗时的请求。如下图 5 所示：
图 5. 添加标记 (PurePath 视图 )
此外，它还具有导入导出的功能，即将收集到的数据导出为 session 文件再导入到 DynaTrace 里面进行分析。具体操作可通过在 Cockpit 面板中 Sessions 文件夹下选择要导出的 Session，右键或者从工具条里的点击 Export Session 按钮即能完成导出操作，导入文件的操作与此类似。
应用案例分析
Performance Report( 性能报告视图 )
从 Cockpit 面板中打开 Performance Report 视图，如图 6 所示：
图 6. 性能报告
性能报告视图中记录了所有访问的网页的详细信息，从这个视图当中我们可以得到以下信息：
在我的例子中，以下内容引起了我的注意：
Timeline( 时间轴视图） - 页面生命周期
时间轴视图可以通过双击 Cockpit 面板中的 TimeLine 节点打开或者在 Performance Report 中通过在某个 URL 上点击右键，选择“DrillDown-TimeLine ”打开。根据 性能报告视图 打开耗时比较长的 URL 的 TimeLine, 通过工具栏或右键菜单，可以打开更多选项，比如内容类型和 JavaScript 触发器的颜色值，或者显示更多事件，比如鼠标移动、点击和键盘事件。打开本案例的时间轴视图，如图 7 所示：
图 7. 时间轴
在此视图下，我们可观测到：
放大右边网络请求时间比较长的部分（在我的例子中，从 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 请求。
从详细信息栏我们可观察到
鼠标点击上面任何一列可进行排序操作，根据 JS 执行时间长短通过鼠标点击展开也可以通过右键点击“扩展子树”展开层次图找到是哪个方法的调用导致执行了这么长的时间。从上图调用栈中可看出 contentDomHandle 来自应用程序的 JavaScript API 的调用总耗时最长，从它的子树中可观察到 JavaScript 执行的时间分布：
为了更方便发现这些函数的性能问题，可以右键 contentDomHandle 方法，选择“Drill Down->Hot Spots ”进入 HotSpots 视图 。
另外，PurePath 视图提供了多种分析方法，您可以通过直接键入您要查找的内容来筛选或查找您需要的数据项，也通过右键菜单或工具栏按钮添加过滤规则可以让软件只显示特定信息。
HotSpot( 热点视图 ) - 哪些地方降低了性能
综上所述，可以从 PurePath-->Drill Down 进入该视图，也可以从面板中直接打开 HotSpot 视图来分析浏览中访问过的所有 JavaScript、DOM 和页面渲染操作。
接着上一节的 contentDomHandle () 方法调用为例，如下图所示：
图 10.Hotspot 案例视图
从上图中可以看到每个方法的调用次数，JS 的执行时间以及总的执行时间等信息：
从我的例子中，就会很明显的发现如下性能问题：
到这里我们基本可以找出从时间轴视图中耗时 13 秒的 JavaScript 具体是被哪些函数的调用占用了，也发现了一些比较明显的性能问题。再回到 HotSpot 总的页面看是否还有其他性能问题 ( 从 Cockpit 面板中双击 HotSpot 节点 )，如下图所示：
图 11.HotSpot 视图
上图默认是按照操作或方法本身的耗时 (Exec[ms]) 不包括子方法来排序的 , 我们发现除了浏览器的渲染比较耗时之外，最有可能存在性能问题的就是应用程序方法的调用。例如在我这个案例中，就发现以下几个问题：
双击 dojo.destroy(div)，打开它的 Back Traces，如下图所示：
图 12.dojo.destroy
从上图可得知，dojo.destroy(<div>) 仅被 applySlideSorterStyles 方法调用了一次就执行了 1 秒的时间，这也是比较可疑的性能问题。另外，您也可以通过总的执行时间来排序，如下图所示，这里您可以找到最耗时的方法的入口：
图 13. 按总消耗时间排序
Network（网络视图） - 分析“对话”
最后我们再来看一下 dynaTrace 的另一个视图 - Network 视图，通过双击左侧 Cockpit 面板中的 Network 节点，或从 Summary 视图中某个 URL 上右键选择“Drill Down – Network”进入到 Network 视图，该图显示了所有网络请求，如下图所示：
图 14.NetWork 视图
Network 视图高亮标记出超慢的请求以及连接等待时间。
这个视图下会用颜色标记每个请求，并且用红色高亮标记出耗时最长的下载请求。默认情况下会以 TimeLine 上的发生顺序来排列，您可以点击任何一列来进行排序。对于每个请求我们可以看到资源是否来自浏览器缓存（Cached 栏），请求类型（Network 或 Ajax），HTTP 状态，Mime 类型，大小，在 DNS、网络连接、服务器响应、网络传输和等待上消耗的时间。界面底部显示了 HTTP 请求和响应头以及返回的实际内容。
常见的性能问题及解决办法：
自动化收集数据
通常我们都是对性能上有问题的页面利用手动的方式访问每个页面再用 dynaTrace 记录和收集数据，但若是对每个页面都要记录或是针对每个不同的应用程序的版本仅对几个页面做这些操作也是需要付出比较大的人力。幸好 dynaTrace 还提供了我们一些新的 Feature 可以用脚本工具代替人工方式驱动浏览器自动收集数据。当您用像 Selenium、Watir、WebAii 这样的工具运行测试脚本时，dynaTrace 可以自动从每个浏览器 session 中收集性能信息。
如何使用 Selenium 整合 dynaTrace 实现自动化收集数据有两种方式 ;
public class GoSpaceDynaTraceSeleniumTest {
Selenium selenium = null;
@Before
public void startup() {
selenium = new DynaTraceSelenium("localhost", 4444, "*iexplore",
"http://localhost:9090");
selenium.start();
}
void addMark(String marker) {
defaultSelenium.runScript("try
Unknown macro: { _dt_addMark(‘" + marker + "‘) }
catch(e) { }");
}
标签：
原文地址：http://www.cnblogs.com/tester-l/p/5797829.html
