Dynatrace介绍：Dynatrace Ajax Edition 前端性能分析工具

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

Dynatrace Ajax的安装，双击安装文件，点击“下一步”便可完成安装，但是dynatrace有两种版本免费版跟商业版，我们选择免费版。安装好的界面：

启动使用有两种方法。

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

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

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

背景知识

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

在 Web2.0 应用程序中，JavaScript 的执行常常会阻碍浏览器端资源的下载和增加页面的 Loading 的时间，导致这个问题的因素主要有：

• 浏览器本身的因素，例如在 IE 浏览器下 ,CSS Selectors 的查找速度相比其他浏览器如 Firefox 相对会慢很多
• CSS 对相同对象的查询次数太多
• 存在太多 Ajax 的 XMLHttpRequest 请求
• JS、CSS、图片数量过多，增加了网络传输开销
• DOM 的尺寸太大，一方面会增加内存的占用，另一方也会影响页面的性能，例如 CSS 的查询操作
• 丰富的 DOM 操作，例如创建新的 DOM 元素或是作为 HTML 形式添加新的元素等
• 过多的事件处理绑定（Event Handler Bindings）等