一、测试环境¶
分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)
报告示例: