性能测试之初探前端性能测试

           现如今信息化时代发展迅速,网页已经不仅仅局限于在电脑上,手机端往往很多也是嵌套个各种H5页面。所以web前端页面的加载速度快慢会直接影响到用户的体验效果。所以为了提升页面的加载速度,让用户的体验更加顺畅,前端性能也变得越发重要了。

一、评估原则

1、基于yahoo的34条黄金规则
以Yahoo网站性能优化34条黄金法则为原则,前端性能优化主要会以以下几个方面进行:
(1) 减少HTTP请求,其中有避免404和空页面、移除重复脚本等,减少页面中HTTP请求的数量会为第一次访问的用户带来更好的用户体验;
(2) 使浏览器渲染更加流畅,通过分别优化HTML、JavaScript、CSS来实现。
(3) 优化单个Http请求,包含通过减少DNS查找次数、避免重定向等方式缩短请求时间;压缩文件、优化图片以及减少Cookie大小等方式减少接收数据量大小;通过使用缓存Ajax结果、配置过期时间以及Etag等方式有效的利用缓存。
2、度量页面速度的指标
页面的加载速度的度量有这三个主要关键指标:
First Impression Time:从用户提交请求到第一时间观察到页面开始加载的时间,这是一项重要指标,该时间越短,用户越早看到浏览器中的内容,心理上的等待时间会越短。
OnLoad Time:从用户提交请求到浏览器触发onLoad事件的时间,在该时间之前完成了页面初始化以及所有引用对象的下载。该时间是比较重要的性能优化对象,OnLoad Time越低,页面加载速度越快,用户等待时间越短。
Total Load Time:从用户提交请求到页面完全加载所消耗的总时间,为OnLoad Time加上OnLoad事件之后额外加载的内容所花费时间。

二、工具介绍

常用的前端页面分析工具有:Yslow、Dynatrace、PageSpeed。
Yslow
          Yslow是完全基于Yahoo 34条黄金法则开发的浏览器插件,它选取了其中的23条规则作为基本规则集,同时用户可以定制自己的规则集进行评估测试。支持Chrome和Firefox两个浏览器,Chrome下直接安装插件即可,Firefox上的Yslow插件需要基于Firebug使用。Yslow评分的结果通过Grade A到F显示,Grade A说明完全满足要求,Grade F说明存在很严重的问题。
《性能测试之初探前端性能测试》《性能测试之初探前端性能测试》
图1-Yslow界面
Dynatrace
          dynaTrace Ajax Edition 是一个强大的底层追踪、前端性能分析工具,该工具不仅能够记录浏览器的请求在网络中的传输时间、前端页面的渲染时间、DOM 方法执行时间以及 JavaScript 代码的解析和执行时间,还可以跟踪 JavaScript 从执行开始,经过本地的 XMLHttpRequest、发送网络请求、再到请求返回的全过程。它包括Cache、网络、Server端、JavaScript代码四个大类,每个大类都分有A~F这六个等级。
《性能测试之初探前端性能测试》《性能测试之初探前端性能测试》
图2-Dynatrace窗口界面
PageSpeed
          PageSpeed是Google开发的评价网页前端性能的插件,同样也是根据Yahoo提出的34条黄金法则为基准,但是在黄金法则的基础上还完成了更人性化的选取,比如说并不是所有的网站都有经费使用CDN,故PageSpeed没有加入CDN检测这一条规则。PageSpeed同样可以支持Chrome和FireFox浏览器。
 《性能测试之初探前端性能测试》
《性能测试之初探前端性能测试》图3-PageSpeed窗口

三、案例分析

本次以Dynatrace为例,这次选择了www.163.com来进行示例,利用Dynatrace对页面速度进行分析。
《性能测试之初探前端性能测试》《性能测试之初探前端性能测试》
《性能测试之初探前端性能测试》
图4-Dynatrace对网易首页分析结果
上图中的红色区域表示严重超过了可接受范围,绿色的表示了结果良好。通过这些数据可以看出来被测页面存在了很多方面的性能问题,具体是哪些请求、哪些原因导致性能问题,可以通过进入Dynatrace的Network视图和timeLine视图进行查看。
就上图分析以下指标可以看出存在问题:
On Server 228836ms:服务器上执行的时间;
On Client 23702ms:js执行时间;
Connect 8253ms 连接时间过长,可能存在一些无法建立连接的请求,需要进入Network视图进行细致定位;
of Request 216:该页面请求数过多
Total Load Time 41498ms : 总加载时间过长,减去了Onlad时间后还有26秒
Ø Wait 58ms: 每个请求平均等待时间

发表评论

电子邮件地址不会被公开。