前端性能利器——dynatrace ajax edition

摘要:
如果你懒惰,你可以在百度网盘下载web性能测试工具的推荐,百度网盘曾写过这篇文章。现在让我们重点介绍一下dynatraceajax版本的使用体验~~ dynatraceajax版本是IE和Firefox上的性能监控工具。右键单击放大的时间片并选择“DrillDowntoTimeframee”以进入PurePath视图,其中显示当前放大时间片上的所有活动。

因为最近的工作跟性能分析有关系,所以写个小总结。

顺带推荐两个我常用的小工具:

1、文件对比工具beyond compare,非常好用,对比、修改很简单。当然我只是用的试用版本。google一下官网下载

2、绿色版本 FastStone Capture,做视频、截图、取距离、取色,非常非常的方便,配合PS,检查页面元素对齐,绝对一利器!如果你比较懒的话,可以来这下载  百度网盘

曾经写过这篇文章web性能测试工具推荐 ,现在就重点说说用dynatrace ajax edition 的体会~~ dynatrace ajax edition 是IE和firefox上的性能监测工具。

1、安装

我选择了一个版本,你可以来这 百度网盘 下载。压缩文件里给了个小提示~ 绝对能够顺利安装上并且在IE上安装toolbar。如果你想测试firefox的话,3.x的可以4.x以上的不支持。

2、特别分享这篇文章,压缩包里也有链接 IBM-dynaTrace Ajax:前端性能分析利器 这个是讲的比较详细的文章,特别推荐!

我讲讲自己使用的过程吧~~

打开IE,打开要监测的页面,清除域下的缓存,再点击工具栏上按钮,启动dynatrace。

一、左侧导航

前端性能利器——dynatrace ajax edition第1张

Performance Report -性能报告视图-记录了所有访问的网页的详细信息

User Experience Report-用户体验报告-[像商业推荐]

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

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

Network-网络视图-显示所有网络请求

Hot Spots-热点视图-哪些地方消耗了最多的性能

要进入某个视图详细查看,可以双击。

二、Performance Report

Rank-评级,这个有点像YSlow吧~
First Impression Time - 首次印象时间。(这个时间开始理解成首次页面渲染时间,第一次render的时候。但核对下面数据发现有出入~~)
OnLoad Time[ms] -载入页面所消耗的时间。显示从页面开始载入到浏览器触发 onload 事件所经历的时间;
Total Load Time[ms]- 显示页面全部 load 完总共消耗的时间
On Server[ms] -服务器端所消耗时间。指客户端发出的所有请求在服务器过了多长时间开始响应所消耗的总时间。
On Client[ms] -JavaScript 执行时间。通过 JS API 或库执行的所有 JavaScript 函数所消耗的总时间
Remark -网络请求花了多长时间,从 Remark中可看到总共有多少请求数,其中有多少 XHR 请求等信息

针对我的链接分析:

onload-近3秒,javascript执行时间长。on server 服务器端耗时,近250ms,对比锁定,从js角度优化。

前端性能利器——dynatrace ajax edition第2张

右下角上有的导航和左侧的相对应的。

Caching-查看缓存情况

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

Server-Side-服务器端,可以看服务器端响应速度

KPI

前端性能利器——dynatrace ajax edition第3张

三、TimeLine

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

鼠标移到不同色块上会有不同的提示。

通过放大的时间片右键选择“Drill Down to Timeframe e”进入 PurePath 视图,显示当前所放大的时间片上所有的活动。

前端性能利器——dynatrace ajax edition第4张

四、Hot Spots

Invocations -表示该方法总共被调用了几次;

Exec[ms]-执行该方法Invocations次的总耗时;
Exec Avg[ms]- 表示方法本身执行所需要的时间;
Total Sum[ms] -活动总耗时
Total Avg[ms] -该活动完成所需时间JS[ms]- 总的 JavaScript 的执行时间。

前端性能利器——dynatrace ajax edition第5张

Back Traces- 栏显示了由谁调用了这个函数,调用了几次,
Forward Traces- 栏显示了这个方法又调用了哪些函数,

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

Ok!这个工具是不是很厉害呢?如果对代码再非常熟悉,就能比较快速的定位到性能消耗比较多或者需要改进的地方!

这个工具我用的也很少,平常用chrome还是能查出问题的。当结构比较复杂,框架JS比较多的时候,chorme再结合dynace能够快速了解页面。

免责声明:文章转载自《前端性能利器——dynatrace ajax edition》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇线阵相机的线扫描速率的计算方法Oracle工具之DBNEWID下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

最全前端资源汇集(引)

综合类地址 前端知识体系http://www.cnblogs.com/sb1987... 前端知识结构https://github.com/JacksonTia... Web前端开发大系概览https://github.com/unruledboy... Web前端开发大系概览-中文版http://www.cnblogs.com/unrule... Web...

JavaScript和Ajax部分(4)

31、 什么是jQuery选择器 1)jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对页面的元素的精准定位,才能完成元素属性和行为的处理。  选择器是jQuery的根基,在jQuery中,对象的事件处理,遍历DOM和Ajax操作都依赖于...

js(javascript)与ios(Objective-C)相互通信交互

随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法 一、UIWebview && iframe && JavaScript  <=iOS6 iOS6原生没有提供js直接调用Objective-C的方式,只能通过UIWebView的UIWebVi...

使用jquery获取url以及jquery获取url参数的方法

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1、jquery获取url很简单,代码如下 1.window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识 2、jquery获取url参数比较复杂,要用到正则表达式,所以学好javascrip...

主流JavaScript框架(Dojo、Google Closure、jQuery、Prototype、Mootools和YUI)的分析和对比

本文主要选取了目前比较流行的JavaScript框架Dojo、Google Closure、jQuery、Prototype、Mootools和YUI进行对比,主要是根据网上的资料整理而成,希望可以供大家参考,如有错误欢迎指出:) 主流框架对比 Dojo(重量级框架) Dojo是一个强大的面向对象JavaScript框架。主要由三大模块组成:Cor...

javascript自动随机跳转代码

javascript自动随机跳转代码,具体什么用途就不说明了。 <script language="javascript"> function dogo(){ var urls = new Array(); urls[0]="http://www.baidu.com"; urls[1]="http://www.52pojie.cn"; urls...