dynaTrace Ajax:前端性能分析利器
上一篇 / 下一篇 2013-08-03 14:05:15 / 个人分类:网速优化
文章来源
- 文章来源:【转载】
随着 jQuery、Dojo、YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相关的。dynaTrace Ajax Edition 是一个强大的底层追踪、前端性能分析工具,该工具不仅能够记录浏览器的请求在网络中的传输时间、前端页面的渲染时间、DOM 方法执行时间以及 JavaScript. 代码的解析和执行时间,还可以跟踪 JavaScript. 从执行开始,经过本地的 XMLHttpRequest、发送网络请求、再到请求返回的全过程。
S#cfZ%t$?0dynaTrace Ajax 目前有两个版本,免费版和商业版,它们之间的区别可查看 版本比较,本文主要是针对免费版本的介绍。在 3.0 之前的版本只支持运行在 IE 浏览器下,包括 IE6、IE7、IE8, 在 3.0 Beta 版之后可同时支持在 IE 和 Firefox 浏览器上的性能跟踪。51Testing软件测试网W*RKv)H%H1\&j
--------------------------------------------------------------------------------
-T(@P)z4y] {0Trace A和使用51Testing软件测试网 K l!l/VutLn9h!O
下载 DynaTrace 最新的版本 , 双击安装文件,点击“下一步”便可完成安装,安装好的操作界面如图 1 所示:
i*^ VBYmkx'z0:k\,[!h1}s(h0图 1. 安装好的操作界面51Testing软件测试网"k4hq/JK3c%R5ng
点击中间齿轮状的图标可对工具的属性进行配置,如下图 2 所示:51Testing软件测试网N`.{5I1A/`|3f$h
B AR k"XqBa0图 2.Preferences( 属性配置 )
(T |X+C\qM0从上图的:51Testing软件测试网iCc7z0P$@/[7UI T
“General ”面板:可设置服务端口,网络代理设置以及浏览器的启动路径等;51Testing软件测试网a]K!_ RjwI
“Agent ”面板:可设置获取参数的配置,例如可配置是否获取 DOM 的访问或方法参数和返回值等,默认会选择所有选项。
h&?(}.}-IH0可以通过两种方式启动 DTA 跟踪您的页面:51Testing软件测试网&A3Je)Vw
直接通过工具启动,如图 1 所示,点击浏览器旁边的下拉按钮进入 “Manage Run Configurations” 或直接点击 “New Run Configuration” 添加所要跟踪的 URL。由于它可以运行在多页面的工作流之下,可以先输入起始网址,然后导航到其他网页,dynaTrace 会在后台监视一切。
%NY)hQL-\Js@"T0图 3.Manage Run Configurations( 管理运行配置 )
h*]Qy'u0从浏览器启动 dynaTrace: 先打开浏览器,进入需要跟踪的界面,再点击浏览器工具栏的按钮,如下图所示(使用前在浏览器插件中 Enable 该工具 ),Connected/not Connected 用以表示当前的追踪状态
G0VHs)T0@(t051Testing软件测试网8r9x)[ \Z7]7L!TY
图 4. 浏览器启动51Testing软件测试网(i*@ F^4b K:eOL
在关闭浏览器之前,可以快速看一下 dynaTrace 软件界面,会看到在“Browsers ”下面有一个节点,那就是当前正在从浏览器中收集的信息。我们可以在运行浏览器的同时分析这些数据,也可以关闭浏览器,再从 Sessions 中分析捕获的信息。
1I T)a3dy7t&V4U0此外,在实际的操作过程当中,可能会需要跟踪打开页面后的一系列操作(例如点击某个按钮触发的事件等), 免费版的 dynaTrace 跟踪的信息不能按照 Page 或者 Action 自动进行分离,这种情况下,我们可以通过在操作过程中通过添加标记 (Insert Mark ) 的方式从 PurePath 视图中来区分每个 Action 行为的时间分割。即在操作前添加一个标记,操作完成后再添加一个标记,再从 PurePath 视图中分析所添加标记之间的比较耗时的请求。如下图 5 所示:51Testing软件测试网-CwxK&B'sC
RM5B g,q@1\0图 5. 添加标记 (PurePath 视图 )51Testing软件测试网gQI$_\L,vM&Bx
此外,它还具有导入导出的的功能即将收集到的数据导出为 session 文件再导入到 DynaTrace 里面进行分析。具体操作可通过在 Cockpit 面板中 Sessions 文件夹下选择要导出的 Session,右键或者从工具条里的点击 Export Session 按钮即能完成导出操作,导入文件的操作与此类似。51Testing软件测试网yvU$X ig(fPV D
--------------------------------------------------------------------------------51Testing软件测试网.~^K0pQ3?"j`!R2RR
背景知识
I};].o^D l]*VF_0在讨论 dynaTrace 工具之前,先简单了解一下在 Web2.0 下经常会碰到的一些客户端的性能问题,这些话题虽然不是本文的主题,但是和本文密切相关,因为您知道了大致存在的问题,再使用相应的工具去发现这些问题就会简单很多。
M7a0xrhr"u0在 Web2.0 应用程序中,JavaScript. 的执行常常会阻碍浏览器端资源的下载和增加页面的 Loading 的时间,导致这个问题的因素主要有:51Testing软件测试网Ap V.N3KSiS
浏览器本身的因素,例如在 IE 浏览器下 ,CSS Selectors 的查找速度相比其他浏览器如 Firefox 相对会慢很多
#K#oq@|c\0CSS 对相同对象的查询次数太多51Testing软件测试网x#g#r%vb3A0b
存在太多 Ajax 的 XMLHttpRequest 请求
(Gu/h'@[$R0JS、CSS、图片数量过多,增加了网络传输开销51Testing软件测试网'h.s6mOsL@
DOM 的尺寸太大,一方面会增加内存的占用,另一方也会影响页面的性能,例如 CSS 的查询操作
y0[IPt0丰富的 DOM 操作,例如创建新的 DOM 元素或是作为 HTML 形式添加新的元素等51Testing软件测试网V [ ~ovl wr2{E
过多的事件处理绑定(Event Handler Bindings)等
1Ed0Y;Zv;cudPmk0下面将结合实际工作中碰到的案例,介绍如何使用 dynaTrace 来跟踪和分析客户端的性能问题。
H(Z'F8i6hl0--------------------------------------------------------------------------------51Testing软件测试网Wt7q {}x r6I
应用案例分析
\cqS$P.q`:M_{,H0下面记录的结果是以我们目前正开发的一个实际项目(IBM Docs)中的一个案例 - 在 Web 中打开一个 PPT 文档,根据 dynaTrace 收集的信息来分析存在的性能问题。
2]9`'RAZ+T9k5L0Performance Report( 性能报告视图 )51Testing软件测试网YgZll/K\ H%A8H_gM7P
从 Cockpit 面板中打开 Performance Report 视图,如图 6 所示:51Testing软件测试网#`"G9y LRFe
图 6. 性能报告51Testing软件测试网+mY"c-{0gN#d;{F
性能报告视图中记录了所有访问的网页的详细信息,从这个视图当中我们可以得到以下信息:51Testing软件测试网(pX;`.h:FO6taTs
载入页面所消耗的时间 :OnLoad Time[ms] 显示从页面开始载入到浏览器派发 onload 事件所经历的时间;Total Load Time[ms] 显示页面全部 load 完总共消耗的时间51Testing软件测试网GGp2D'udmC\
JavaScript. 执行时间 :On Client[ms] 通过 JS API 或库执行的所有 JavaScript. 函数所消耗的总时间51Testing软件测试网.O l:U/T$~
网络请求花了多长时间: 从 Remark 中可看到总共有多少请求数,其中有多少 XHR 请求等信息
*r2l#o\`wr$DB,X0服务器端所消耗时间: On Server[ms] 指客户端发出的所有请求在服务器过了多长时间开始响应所消耗的总时间51Testing软件测试网.~9B?gd| ]'i,N$l
从右下方的各个面板中可以得到总体的性能分析报告(更详细的信息可查看 Cockpit 面板中的相应节点),例如:
"k7y#w/W-Z0NetWork 中可看出有多少资源是从浏览器缓存中读取的,有多少的 HTTP 转发请求消耗了不必要的网络传输时间;合并同一个 domain 中的 CSS、JS 的请求可节省多长网络传输时间。51Testing软件测试网 { [KF C%@r"K+?
TimeLine 中显示了页面的生命周期:该图反映了页面进程中网络资源下载,JavaScript. 执行,页面发生渲染,CPU 使用情况,以及发生了哪些事件,例如:Load 事件、XMLHttpRequest 等信息。
.KZ4_ U-iuy0在我的例子中,以下内容引起了我的注意:
Uh_8ewD hH8K'Y0网络耗时较长,请求数目太多:总共有 896 网络请求,其中有 300+ 个 request 是对图片的请求,300+ 个是从 cache 中对相同图片的读取。
y2{fD*@G sd0JavaScript. 执行时间总耗时 22 秒: 从右下方的 JavaScript/Ajax(A) 报告中可看出有一个 OnLoad 的事件就消耗了总共 13 秒 的时间,双击可从右边窗口看出它的前后调用栈信息。
1O ~ F"]$A#K0Server 端处理总共花了 20 秒 的时间 : 这说明 Server 端也可能存在性能问题,可推荐大家使用 Performance Inspector工具去分析 Server 端的性能问题,这里不再详述。
dBAYw,RZp}OI0Remark 栏还显示了页面总共发出了 23 个 XMLHttpRequest 请求: 这可以从时间轴的 event 行中找出发生的时间点。下一节将会针对这些问题进行更详细的讨论。