dynaTrace Ajax Edition是一个强大的底层追踪、前端性能分析工具,该工具不仅能够记录浏览器的请求在网络中的传输时间、前端页面的渲染时间、DOM 方法执行时间以及 JavaScript 代码的解析和执行时间,还可以跟踪 JavaScript 从执行开始,经过本地的 XMLHttpRequest、发送网络请求、再到请求返回的全过程。

影响前端性能的因素主要有:

· 浏览器本身的因素,例如在 IE 浏览器下 ,CSS Selectors 的查找速度相比其他浏览器如 Firefox 相对会慢很多

· CSS 对相同对象的查询次数太多

· 存在太多 Ajax 的 XMLHttpRequest 请求

· JS、CSS、图片数量过多,增加了网络传输开销

· DOM 的尺寸太大,一方面会增加内存的占用,另一方也会影响页面的性能,例如 CSS 的查询操作

· 丰富的 DOM 操作,例如创建新的 DOM 元素或是作为 HTML 形式添加新的元素等

· 过多的事件处理绑定(Event Handler Bindings)等

下载安装dynaTrace ajax工具

在此就不做详细说明了。

Performance Report性能报告视图

点击Performance Report可以查看所有访问的网页的详细信息,如下图所示:

前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax) 

从这个视图中我们可以得到以下信息:

· 载入页面所消耗的时间 OnLoad Time[ms] 显示从页面开始载入到浏览器派发 onload 事件所经历的时间;Total Load Time[ms] 显示页面全部 load 完总共消耗的时间

· JavaScript 执行时间 On Client[ms] 通过 JS API 或库执行的所有 JavaScript 函数所消耗的总时间

· 网络请求花了多长时间 从 Remark 中可看到总共有多少请求数,其中有多少 XHR 请求等信息

· 服务器端所消耗时间 On Server[ms] 指客户端发出的所有请求在服务器过了多长时间开始响应所消耗的总时间

另外可以从下面的选项卡中得到总体的性能分析报告,例如:

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

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

Timeline( 时间轴视图) - 页面生命周期

点击Timeline可以打开时间轴视图,如下图所示:

前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax) 

从这个视图中我们可以得到以下信息:

· CPU 占用率可显示 JavaScript 的执行导致浏览器占用 CPU 的时间

· JavaScript 执行所占用的时间:从上图中观察到右边蓝色块的那一段耗时比较长鼠标悬停在这段上可以看到是由于什么原因导致的,双击可以查看详细信息。

· Rendering悬停上去可发现大部分是由于在计算 layout 所需要的时间,一般在 IE 上面执行相对会比较明显

· Network:网络请求并行下载耗时

· Events:Event 轴显示了鼠标点击事件,XMLHttpRequest 事件和 OnLoad 事件

PurePath路径视图- JavaScript、DOM 和 Ajax 问题的详细说明

点击PurePaths可以打开路径视图,如下图所示:

前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax) 

从视图中能够查看每个javaScript方法、DOM访问、ajax请求以及网络请求所消耗的时间。选中某一行可以查看详细信息,如JavaScript 代码执行过程,包括每个方法的执行时间和调用的参数及返回值。具体参数值如下:

· Start : 一个活动的开始时间

· Duration[ms] : 活动的持续时间,包含子树的活动时间

· JS[ms] :JavaScript 执行总的耗时,包括异步的子树执行时间但不包括等待时间

· Total[ms] :活动本身从开始到结束的持续时间 , 不包含子活动的执行时间

· Exec[ms] :活动本身执行时间,不包括其子活动的需要的时间

· Size : 树中总的节点数,包含所有子活动的节点数。

Network(网络视图) - 分析“对话”

点击Network进入网络视图,如下图所示:

 

前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax) 

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

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

点击HotSpot可以查看热点视图,如下图所示:

前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax)前端性能分析利器(dynaTrace ajax) 


视图默认按照操作或方法本身的耗时 (Exec[ms]) 不包括子方法来排序的。还可以查看平均耗时Exec Avg[ms](不包括子方法)、总的消耗时间Total Sum[ms](包括子方法)总的平均时间Total Avg[ms](包括子方法)。

Back Traces 栏显示了由谁调用了这个函数,调用了几次

Forward Traces 栏显示了这个方法又调用了哪些函数,Invocations 表示该方法总共被调用了几次

底部显示了在 Back Traces 树或 Forward Traces 树中选中的 JavaScript 的源码

 

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

· JS 或 CSS 的个数太多:需适当的合并同域下的 JS 或 CSS 以降低客户端的请求数目

· JS 的尺寸太大导致在局域网的条件下下载时间太长:可以对尺寸比较大的文件在服务器端进行压缩,例如使用 Dojo ShrinkSafe 或 YUI 进行压缩

· 图片数量太多:可使用 CSS Sprites 将一些小的图片组合在一起成为一张图片,这样可以减轻服务器的负载,提高网页的加载速度




浏览 611 评论 0 赞 0 砸 0 标签: 优化 前端
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款