前端性能测试方案

 

一、测试环境¶

分3种测试环境：

1、无缓存低带宽（服务器配置）。

为了开源，准备最差的网络环境，页面平均加载时间的差别会更明显。
比如DSL，不压缩的增幅为90%，拨号用户增幅140%。平均效果不能反映实际情况。
15%带宽小的用户，增加额外的时间足以让他们放弃。

 

2、有缓存低带宽。

尽可能启用缓存，存在页面缓存配置错误的情况。
启用缓存论据：用户可能只有开始的一次访问携带的是空缓存，之后的多次后续页面查看都具有完整缓存。
用户查看页面越多，缓存的论据越强势。

 

3、正常环境：网络光纤。

实际工作中的网络环境。

 

4、去掉登录重定向。

避免页面请求重定向。

 

5、测试地址。

URLs：

 

二、测试工具

1、Fiddler：

控制网络带宽。
光纤差异不明显。

 

2、DynaTrace：

First Imp\Onload\Fully Load三次时间测试。AJAX响应时间过长报警。

参照：
《DynaTrace评分标准》 
《dynaTrace之一 —— 网络请求和往返的最佳实践》 
《dynaTrace之二 —— JavaScript和AJAX性能最佳实践》 

《DynaTrace性能报告》
标准：分数在80分以上，最好在90分以上。

 

3、Firebug & YSlow：

14条评分。

标准：分数在80分以上，最好在90分以上。

参照：
YSlow性能报告-2010.02.22
YSlow性能报告-2011.02.16

 

4、chrome任务管理器 & chrome开发者工具->Profiles

浏览器内存检测

 

5、优化工具smush.it很不方便

yahoo无损图片压缩工具

 

三、性能点

3.1 AJAX性能点

系统真实处理一次请求作为一次PV（pageview）。

1、取PV前列的5个异步请求作为前端异步请求的性能点：

（报表日期：2011年11月07 统计）

2、用户调用较多的路由

单条数据请求，属于同一个路由，固定URL统计不到：

请求树节点数据:

3、开发预估某些算法比较复杂的性能点

每次点击树节点，会请求相同的右击菜单内容，可以只请求一次。（非产品、产品线树）
// to do 需要后端开发提出。

 

3.2 页面

标准：
1.时间
　　◆首次显示的时间如果<1s，则优秀，如果<2.5s则是可接受的，如果>2.5s则很慢；
　　◆onLoad时间如果<2s，则优秀，如果<4s则是可接受的，如果>4s则很慢；
　　◆完全载入时间如果<2s，则优秀，如果<5s则是可接受的，如果>5s则很慢。
2.页面大小（参考UED团队标准）
　　◆优秀的网站页面大小应小于800K，可接受的网站请求数最大不能超过1500K，超过1500K的网站可认为是糟糕的；
3.请求数量
　　◆优秀的网站请求数应小于40，可接受的网站请求数最大不能超过100，超过100的网站可认为是糟糕的；

9个主页面测试：urls


First Imp\Onload\Fully Load三次时间测试的平均时间并分析长时间响应占百分比。

报表示例：

四、静态资源

4.1 JS

标准：JS代码执行不能超过0.1s（页面会给人不够平滑快捷的感觉）。

优化方法举例：
1、拆分初始化负载。

2、整合异步脚本。

3、布置行内脚本。

4、高效JS。

5、Gzip压缩。

 请求：Accept-Encoding: gzip, deflate
 响应：Content-Encoding: gzip

报告示例：

4.2 HTML

// 移除引号（XHTML必须用引号包含）

4.3 CSS

避免行内样式。

避免子选择符（div）、后代选择符（div span）。

YUI Compressor压缩。

【总结】：代码优化点：事件委托、相对URL、移除空格、移除引号、使用CSS

报告示例：

4.4 图像

使用png（照片jpeg）

无损压缩（yahoo无损图片压缩工具smush.it）

报告示例：