前端性能利器——dynatrace ajax edition
因为最近的工作跟性能分析有关系,所以写个小总结。
顺带推荐两个我常用的小工具:
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。
一、左侧导航
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角度优化。
右下角上有的导航和左侧的相对应的。
Caching-查看缓存情况
Network-可看出有多少资源是从浏览器缓存中读取的,有多少的 HTTP 转发请求消耗了不必要的网络传输时间;合并同一个 domain 中的 CSS、JS 的请求可节省多长网络传输时间。
Server-Side-服务器端,可以看服务器端响应速度
KPI
三、TimeLine
TimeLine 中显示了页面的生命周期:该图反映了页面进程中网络资源下载,JavaScript 执行,页面发生渲染,CPU 使用情况,以及发生了哪些事件,例如:Load 事件、XMLHttpRequest 等信息。
鼠标移到不同色块上会有不同的提示。
通过放大的时间片右键选择“Drill Down to Timeframe e”进入 PurePath 视图,显示当前所放大的时间片上所有的活动。
四、Hot Spots
Invocations -表示该方法总共被调用了几次;
Exec[ms]-执行该方法Invocations次的总耗时;
Exec Avg[ms]- 表示方法本身执行所需要的时间;
Total Sum[ms] -活动总耗时
Total Avg[ms] -该活动完成所需时间JS[ms]- 总的 JavaScript 的执行时间。
Back Traces- 栏显示了由谁调用了这个函数,调用了几次,
Forward Traces- 栏显示了这个方法又调用了哪些函数,
界面底部显示了在 Back Traces 树或 Forward Traces 树中选中的 JavaScript 的源码
Ok!这个工具是不是很厉害呢?如果对代码再非常熟悉,就能比较快速的定位到性能消耗比较多或者需要改进的地方!
这个工具我用的也很少,平常用chrome还是能查出问题的。当结构比较复杂,框架JS比较多的时候,chorme再结合dynace能够快速了解页面。
前端性能利器——dynatrace ajax edition的更多相关文章
- 前端性能测试工具 : dynaTrace Ajax (还没写完)
今天开始写这个工具, #什么是dynaTrace Ajax? 随着 jQuery.Dojo.YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相 ...
- web前端性能意义、关注重点、测试方案、优化技巧
1.前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则: 80%的最终用户 ...
- 什么是 dynaTrace Ajax
随着 jQuery.Dojo.YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相关的.dynaTrace Ajax Edition 是一个强大 ...
- 转 web前端性能分析--实践篇
当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff ...
- 转 WEB前端性能分析--工具篇
在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- Performance — 前端性能监控利器
Performance是一个做前端性能监控离不开的API,最好在页面完全加载完成之后再使用,因为很多值必须在页面完全加载之后才能得到.最简单的办法是在window.onload事件中读取各种数据. 大 ...
- [转] Performance — 前端性能监控利器
timing (PerformanceTiming) 从输入url到用户可以使用页面的全过程时间统计,会返回一个PerformanceTiming对象,单位均为毫秒 按触发顺序排列所有属性:(更详细标 ...
- 前端性能监控系统ShowSlow
作者:zhanhailiang 日期:2014-11-14 1. 简单介绍 ShowSlow是开源的前端性能监控系统,提供了下面功能: 前端性能指标数据收集功能:ShowSlow原生提供了数据收集工具 ...
随机推荐
- CodeForces 125E MST Company
E. MST Company time limit per test 8 seconds memory limit per test 256 megabytes input standard inpu ...
- POJ2010 Moo University - Financial Aid(二分法)
题目地址 分析:如果用二分法,关键是score和aid分开排序,score排序是为了充分利用中位数的性质,这样就可以确定m左右必须各选N/2个,到这之后有人是用dp求最优解,可以再次按照aid排序一次 ...
- [iOS 基于CoreBluetooth的蓝牙4.0通讯]
一.首先大致介绍下蓝牙4.0的模式,中心和周边: 一般情况下,iPhone作为中心,接收来自周边传感器(比如手环等)采集的数据. 二.那整一个数据通讯的协议是怎样的呢? 为什么要一层层搞这么复杂呢?据 ...
- Centos下 为Firefox安装Flash插件
方法一: 直接到官网去下载RPM格式的安装包,下载好后直接 用 rpm -ivh XXXX.rpm 来安装即可. 方法二: 到官网下载tar.gz格式的,自己配置安装: #wget http://fp ...
- HDU 5802 Windows 10
传送门 Windows 10 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- AngularJs $rootScope.Scope 作用域操作
这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...
- 翻译:通往WinDbg的捷径(一)
原文:http://www.debuginfo.com/articles/easywindbg.html译者:arhat时间:2006年4月13日关键词:CDB WinDbg 导言你钟情什么样的调试器 ...
- mysql中max_allowed_packet参数的配置方法(避免大数据写入或者更新失败)
修改方法 1.修改配置文件 可以编辑my.cnf来修改(windows下my.ini),在[mysqld]段或者mysql的server配置段进行修改. 代码如下: max_allowed_packe ...
- JavaScript中捕获/阻止捕获、冒泡/阻止冒泡
JavaScript中捕获/阻止捕获.冒泡/阻止冒泡 事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...
- C#读写文本文件
static public string Read(string path) { StreamReader sr = new StreamReader(path,Encoding.Default); ...