Dynatrace Ajax Editon性能分析

以云网oa（打开首页登录）为例，根据Dynatrace收集到的信息分析性能问题。

性能报告视图中记录了所有访问的网页的详细信息，以第三个URL分析，http://192.168.31.165:8080/oa/oa.jsp，从这个视图当中我们可以得到以下信息：

• OnLoad Time[ms]（载入页面所消耗的时间） ：显示从页面开始载入到浏览器派发 onload 事件所经历的时间；Total Load Time[ms] 显示页面全部 load 完总共消耗的时间
• On Client[ms]（JavaScript 执行时间 ）：通过 JS API 或库执行的所有 JavaScript 函数所消耗的总时间
• Remark（网络请求花了多长时间）： 从 Remark 中可看到总共有多少请求数，其中有多少 XHR 请求等信息
• On Server[ms]（服务器端所消耗时间）：指客户端发出的所有请求在服务器过了多长时间开始响应所消耗的总时间

此外，从右下方的各个面板中可以得到总体的性能分析报告（更详细的信息可查看 Cockpit 面板中的相应节点），例如：

• NetWork 中可看出有多少资源是从浏览器缓存中读取的，有多少的 HTTP 转发请求消耗了不必要的网络传输时间；合并同一个 domain 中的 CSS、JS 的请求可节省多长网络传输时间。

• TimeLine 中显示了页面的生命周期：该图反映了页面进程中网络资源下载，JavaScript 执行，页面发生渲染，CPU 使用情况，以及发生了哪些事件，例如：Load 事件、XMLHttpRequest 等信息。

在云网oa的项目中，有以下内容值得注意：

• 在网络部分存在一个HTTP重定向，产生不必要的阻塞。

 

• 
• JavaScript 执行时间总耗时 42ms： 从右下方的 JavaScript/Ajax(A) 报告中可看出这其中包括三个JS files，双击可从右边窗口看出它的前后调用栈信息。

• Server 端处理总共花了 1265ms 的时间 。
• Remark 栏还显示了页面总共发出了 141 个请求: 这可以从时间轴的 event 行中找出发生的时间。
• Caching的评级最低（F），其中有65个资源没有做缓存处理或者处理已经超期，其中包括大量图片。

 

 

 

• Event 轴显示了鼠标点击事件，其中包括一个load事件和 一个upload事件。

进入 PurePath 视图，按照Duration排序，鼠标点击下图中的第1个时间片即 JS 占用 46 秒的，面板同时会更新当前所选活的信息，显示 JavaScript 代码执行过程，包括每个方法的执行时间和调用的参数及返回值。我们不仅可以看到 JavaScript 方法，也能看到 DOM 访问和 Ajax 请求。

 

从详细信息栏我们可观察到

• Start : 一个活动的开始时间
• Duration[ms] : 活动的持续时间，包含子树的活动时间
• JS[ms] :JavaScript 执行总的耗时，包括异步的子树执行时间但不包括等待时间
• Total[ms] ：活动本身从开始到结束的持续时间 , 不包含子活动的执行时间
• Exec[ms] ：活动本身执行时间，不包括其子活动的需要的时间
• Size : 树中总的节点数，包含所有子活动的节点数。

鼠标点击上面任何一列可进行排序操作，根据 JS 执行时间长短通过鼠标点击展开也可以通过右键点击“扩展子树”展开层次图找到是哪个方法的调用导致执行了这么长的时间。

为了更方便发现这些函数的性能问题，可以右键 contentDomHandle 方法，选择“Drill Down->Hot Spots ”进入HotSpots 视图 。

另外，PurePath 视图提供了多种分析方法，您可以通过直接键入您要查找的内容来筛选或查找您需要的数据项，也通过右键菜单或工具栏按钮添加过滤规则可以让软件只显示特定信息。

HotSpot( 热点视图 ) - 哪些地方降低了性能

综上所述，可以从 PurePath-->Drill Down 进入该视图，也可以从面板中直接打开 HotSpot 视图来分析浏览中访问过的所有 JavaScript、DOM 和页面渲染操作。

接着上一节的 contentDomHandle () 方法调用为例，如下图所示：

从上图中可以看到每个方法的调用次数，JS 的执行时间以及总的执行时间等信息：

• Back Traces 栏显示了由谁调用了这个函数，调用了几次，从上图可看到该方法被 Dojo 的 <return-closure> 调用了 2 次，而方法本身调用的执行时间很短只有 3ms(Exec[ms])
• Forward Traces 栏显示了这个方法又调用了哪些函数，Invocations 表示该方法总共被调用了几次；活动总耗时 12.7s(Total[ms]),Exec[ms] 表示方法本身执行所需要的时间，JS[ms] 总的 JavaScript 的执行时间。
• 界面底部显示了在 Back Traces 树或 Forward Traces 树中选中的 JavaScript 的源码

从我的例子中，就会很明显的发现浏览器渲染比较耗时。

 

network（网络视图） - 分析“对话”

通过双击左侧 Cockpit 面板中的 Network 节点，或从 Summary 视图中某个 URL 上右键选择“Drill Down – Network”进入到 Network 视图，该图显示了所有网络请求，如下图所示：

Network 视图高亮标记出超慢的请求以及连接等待时间。

这个视图下会用颜色标记每个请求，并且用红色高亮标记出耗时最长的下载请求。默认情况下会以 TimeLine 上的发生顺序来排列，您可以点击任何一列来进行排序。对于每个请求我们可以看到资源是否来自浏览器缓存（Cached 栏），请求类型（Network 或 Ajax），HTTP 状态，Mime 类型，大小，在 DNS、网络连接、服务器响应、网络传输和等待上消耗的时间。界面底部显示了 HTTP 请求和响应头以及返回的实际内容。

常见的性能问题及解决办法：

• JS 或 CSS 的个数太多：需适当的合并同域下的 JS 或 CSS 以降低客户端的请求数目
• JS 的尺寸太大导致在局域网的条件下下载时间太长：可以对尺寸比较大的文件在服务器端进行压缩，例如使用 Dojo ShrinkSafe 或 YUI 进行压缩
• 图片数量太多：可使用 CSS Sprites 将一些小的图片组合在一起成为一张图片，这样可以减轻服务器的负载，提高网页的加载速度