dynaTrace Ajax：前端性能分析利器

　　简介： 本文结合实际案例，针对 dynaTrace Ajax 所包含的各个组件的功能进行了详细的讲解，以帮助前端开发人员或测试人员使用该工具快速发现 Web 前端的性能问题。

　　什么是 dynaTrace Ajax

　　随着 jQuery、Dojo、YUI 等框架的兴起让构建 Web2.0 应用更加容易，但随之带来的定位等应用问题也越来越难，尤其是与性能相关的。dynaTrace Ajax Edition 是一个强大的底层追踪、前端性能分析工具，该工具不仅能够记录浏览器的请求在网络中的传输时间、前端页面的渲染时间、DOM 方法执行时间以及 JavaScript 代码的解析和执行时间，还可以跟踪 JavaScript 从执行开始，经过本地的 XMLHttpRequest、发送网络请求、再到请求返回的全过程。

　　dynaTrace Ajax 目前有两个版本，免费版和商业版，它们之间的区别可查看 版本比较，本文主要是针对免费版本的介绍。在 3.0 之前的版本只支持运行在 IE 浏览器下，包括 IE6、IE7、IE8， 在 3.0 Beta 版之后可同时支持在 IE 和 Firefox 浏览器上的性能跟踪。

　　dynaTrace Ajax 安装和使用

　　下载 DynaTrace 最新的版本 , 双击安装文件，点击“下一步”便可完成安装，安装好的操作界面如图 1 所示：

　　图 1. 安装好的操作界面

　　点击中间齿轮状的图标可对工具的属性进行配置，如下图 2 所示：

　　图 2.Preferences( 属性配置 )

　　从上图的：

　　“General ”面板：可设置服务端口，网络代理设置以及浏览器的启动路径等;

　　“Agent ”面板：可设置获取参数的配置，例如可配置是否获取 DOM 的访问或方法参数和返回值等，默认会选择所有选项。

　　可以通过两种方式启动 DTA 跟踪您的页面：

　　直接通过工具启动，如图 1 所示，点击浏览器旁边的下拉按钮进入 “Manage Run Configurations” 或直接点击 “New Run Configuration” 添加所要跟踪的 URL。由于它可以运行在多页面的工作流之下，可以先输入起始网址，然后导航到其他网页，dynaTrace 会在后台监视一切。

　　图 3.Manage Run Configurations( 管理运行配置 )

　　从浏览器启动 dynaTrace: 先打开浏览器，进入需要跟踪的界面，再点击浏览器工具栏的按钮，如下图所示(使用前在浏览器插件中 Enable 该工具 ),Connected/not Connected 用以表示当前的追踪状态

　　图 4. 浏览器启动

　　在关闭浏览器之前，可以快速看一下 dynaTrace 软件界面，会看到在“Browsers ”下面有一个节点，那就是当前正在从浏览器中收集的信息。我们可以在运行浏览器的同时分析这些数据，也可以关闭浏览器，再从 Sessions 中分析捕获的信息。

　　此外，在实际的操作过程当中，可能会需要跟踪打开页面后的一系列操作(例如点击某个按钮触发的事件等), 免费版的 dynaTrace 跟踪的信息不能按照 Page 或者 Action 自动进行分离，这种情况下，我们可以通过在操作过程中通过添加标记 (Insert Mark ) 的方式从 PurePath 视图中来区分每个 Action 行为的时间分割。即在操作前添加一个标记，操作完成后再添加一个标记，再从 PurePath 视图中分析所添加标记之间的比较耗时的请求。如下图 5 所示：

　　图 5. 添加标记 (PurePath 视图 )

　　此外，它还具有导入导出的的功能即将收集到的数据导出为 session 文件再导入到 DynaTrace 里面进行分析。具体操作可通过在 Cockpit 面板中 Sessions 文件夹下选择要导出的 Session，右键或者从工具条里的点击 Export Session 按钮即能完成导出操作，导入文件的操作与此类似。

　　背景知识

　　在讨论 dynaTrace 工具之前，先简单了解一下在 Web2.0 下经常会碰到的一些客户端的性能问题，这些话题虽然不是本文的主题，但是和本文密切相关，因为您知道了大致存在的问题，再使用相应的工具去发现这些问题就会简单很多。

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