前端性能利器——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角度优化。