爱测未来性能-前端性能测试平台及应用

性能测试一直是Web应用中非常受关注的部分。目前人们对性能的关注还主要集中在服务端，大部分人在说到“性能测试”的时候，都会把重点放到服务端的性能测试和调优，也就是通过各种方法找到服务端的性能瓶颈并尝试对其进行调优。实际上，对于web应用来说，除了考虑服务端在足够短的时间内返回页面数据之外，还可以从页面前端的角度来考虑性能测试和性能调优。本文将围绕前端性能测试目的、测试平台搭建及应用进行介绍。

一、前端性能测试目的

前端性能测试对象有HTML、CSS、JS、AJAX等前端技术开发的Web页面，服务端数据返回、网络传输、页面渲染等都会影响用户浏览网页速度。前端性能的指标有：白屏时间、首屏时间、用户可交互时间、总下载时间、DNS解析时间、TCP连接时间、HTTP请求时间、HTTP响应时间。
前端性能测试的目的是计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间指标，对该页面性能进行评估分析，找出影响性能的主要因素和瓶颈，并在此基础上，给出一定的优化建议和解决方案，从而提升用户体验。
尽管性能如此重要，但是在开发迭代过程中难免会有所忽视，性能会伴随产品的迭代而有所衰减。特别在移动端，网络一直是一个很大的瓶颈，并且页面越来越大、功能越来越复杂，因此需要一套性能监控系统来持续监控、评估、预警页面性能状况、发现瓶颈，指导优化工作的进行。

二、前端性能测试工具介绍

目前，前端性能测试的执行工具有很多，比如YSlow、PageSpeed、WebPagetest、OneAPM
Browser Insight等等。这些执行工具都很好使用，并且它们关注的性能点也有些不同，所以就有了将这些工具产生的数据都收集起来的工具showslow。通过部署和匹配showslow，可以实现将上述工具产生的数据收集并产生不错的报表，接下将来对三种常用前端测试工具进行较为详细的介绍。

1.YSlow

YSlow（解析为why slow）是雅虎基于网站优化规则推出的工具，可以帮助分析并优化网站性能。雅虎网站优化规则在十几个方面为网站提出优化建议，包括尽可能的减少HTTP的请求数、使用
Gzip 压缩、将CSS样式放在页面的上方、将脚本移动到底部、减少DNS查询等十几条规则，YSlow
会根据这些规则分析测试网站并给出评级。

通过给浏览器安装YSlow插件并开启后，在控制面板里会给出评分提示和改进意见，下面是YSlow的基本视图。

Yslow的Grade（等级视图）



Yslow
给出的网站性能评分是从F~A，A最优、F最差，通过上图的测试博客来看，网站有4处得分最低，例如上图中的最低分提示：博客的HTTP请求太多，其中应用个14个外部js、3个CSS文件、14个CSS背景图片。

Yslow Components（组件视图）






可以通过Components查看网页各个元素占用的空间大小，例如某个博客页面，有236个images占用了489.2
K，通过详细查看，发现来自gravatar头像的引用图片非常大，再加上博客本身评论量就大，每个头像就占用几K，几百个就占用了整个网页50%
的大小，而且图片还是引用的，这样加载就更慢了。

Yslow Statistics（统计信息视图）





上图左侧图表显示的是页面元素在空缓存中的加载情况，右侧为页面元素使用缓存后的页面加载情况。从图中可以直观的看出（尤其是红框中），这个网页有263个HTTP请求，网页的大小达到773.9K，意味着每打开一个页面几乎需要下载1M的东西，而通过使用缓存后我们可以看到效果图片基本靠缓存，而网页总大小压缩到43.2K。Statistics这个统计信息视图工具和Components（第三选项卡）一样，只是效果更直观，如果要获得性能优化建议还是要看Grade（第二选项卡）的详细建议。

2.PageSpeed 

网站管理员和网络开发人员可以使用PageSpeed
来评估他们网页的性能，并获得改进网页性能的建议。PageSpeed最初是Google内部用来改进网页设计的工具，它整合在Firefox的著名插件Firebug中。当用户运行PageSpeed时，可以立即获得如何改进网页载入速度的建议。PageSpeed能自动为用户优化图像，提供可以发布在网页上的压缩图片，它也能识别JavaScript和CSS载入问题，帮助开发者减少浏览者等待网页展示的时间。

安装之后，只需要在页面上点击右键/审查元素，就可以在最后一个标签中看到PageSpeed了。



点击开始分析，稍后就会给出分析结果。



PageSpeed的分析基于一个分为五类的最佳实践列表：1.优化缓存——让你应用的数据和逻辑完全避免使用网络；2.减少回应时间——减少一连串请求-响应周期的数量；3.减小请求大小——减少上传大小；4.减小有效负荷大小——减小响应、下载和缓存页面的大小；5.优化浏览器渲染——改善浏览器的页面布局。

3.WebPagetest

WebPagetest是一款Web应用程序，它将一个URL以及一系列配置参数作为输入，并对那个URL运行性能测试。WebPagetest可配置参数的数量非常多，范围非常广。如果测试结果不只保存在个人的服务器上，就需要安装自己的WebPagetest实例，否则，就必须使用
WebPagetest的公开实例。可以选择任何一组网站地址来进行测试，每个地址都可以用一个或多个浏览器对其进行测试，同时可以指定连接速度以及运行测试的数量。界面如图所示：



在图中填写站点url、test location和Browser后，点击右侧start
test即可进行检测站点资源加载情况，如下图所示（此处以jd.com为例）。



图中显示目前在排队等待测试，前面有27个待测试站点。可以关闭该网页，过一段时间再打开看是否检测完毕，可以在test
result中查看。



点击http://jd.com就能打开站点资源加载的详细信息，见下图：



图中显示summary信息，可以点击Details、Performance
Review等查看详细信息来了解站点加载资源情况。从而找出加载慢的原因（如域名解析问题、cs、js文件加载问题等），方便后续优化。

三、性能测试平台搭建

ShowSlow是开源的前端性能监控系统，具有以下功能：

(1)
前端性能指标数据收集功能：ShowSlow支持通过YSlow、PageSpeed等第三方工具将性能数据上报给服务端完成收集（其服务器端提供了针对多达8种不同工具上报的数据收集器dommonster、dynatrace、events、har、metric、pagespeed、webpagetest、yslow）；

(2)
前端性能指标数据展示系统。下面将以windows XP sp3系统为例，讲解ShowSlow的部署过程，
ShowSlow可以将许多前端性能监控整合在一起，由于配置方式相似，仅以YSlow为例。

1.搭建环境

系统：windows XP sp3
ShowSlow：showslow_0.9
浏览器：FireFox 31
Yslow版本：Yslow 3.0.4
AppServ版本：appserv-win32-2.5.10
AppServ是PHP网页架站工具组合包，作者将一些网络上免费的架站资源重新包装成单一的安装程序，以方便初学者快速完成架站，AppServ所包含的软件有：Apache、Apache
Monitor、PHP、MySQL、phpMyAdmin等。如果本地机器没有安装过apache、php、mysql等系统，那么用这个软件则可以迅速搭建完整的底层环境。

2.安装与配置

1）首先安装下载的appserv-win32-2.5.10.exe文件；

2）安装完成之后，打开MySql数据库，输入你在安装时填写的密码；

3）mysql>create databaseshowslow; //创建一个数据库；

mysql>use showslow; //切换到新建的数据库；

4）在showslow安装包中查找tables.sql的文件，然后复制到一个简单的路径下面，以放置在C盘根目录下为例，执行下面命令；

mysql>sourcec:/tables.sql;  //将所有的表导入到新建立的数据库里

mysql>show tables;  //确认一下导入是否成功

5）打开showslow安装包，找到config.sample.php重命名config.php如果含有config.php，则无须重命名，修改config.php里面的参数：

$db ='showslow';

$user = 'root';

$pass = '*****';  //密码根据情况修改

6）最后把你修改好的showslow文件夹放到…\AppServ\www\文件夹下面。 

3.配置YSlow上报数据

1）打开安装好的火狐浏览器；

2）菜单栏：工具/附加组件/搜索：Firebug
和Yslow两个组件下载安装后重启浏览器；

3）在火狐地址栏目输入：about:config；

4）修改下面三项内容：

  extensions.yslow.beaconUrl = http://localhost/showslow/beacon/yslow/（即：本机路径）
  extensions.yslow.beaconInfo = grade

   extensions.yslow.optinBeacon= true

5）重新启动浏览器：在浏览器内输入http://localhost/showslow/。

四、实例介绍

考虑篇幅问题，此次仅详细介绍YSlow对百度主页测试的步骤及结果。使用Firefox访问：https://www.baidu.com/，点击firebug：



点击Run Test：



等级视图：



YSlow根据23条测试规则对百度主页分别进行从F~A等级的评级，其中有18项A等级，1项B等级，2项C等级，1项F等级，1项n/a等级（表示此测试规则与该页面无关），总体评级为A。针对未达到A等级的项YSlow会提供优化建议，
Use a Content Delivery Network (CDN)项评分等级仅为F，优化建议如下：



百度主页有16个静态组件没有在CDN上，YSlow建议将这些静态组件加入CDN。

组件视图：



分组显示页面组件，点击 Expand All展开显示百度主页各个分组内的组件信息。



统计信息视图：



左侧图表显示是页面元素在空缓存的加载情况，右侧为页面元素使用缓存后的页面加载情况。页面元素缓存使页面的http请求和页面总大小都减少，从而加快页面打开时间。

前端是庞大的，包括 HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。监测工具会对当前页面进行评分、对每项进行评级并进行详细的说明，开发人员可根据测试结果所提出的优化建议进行优化，这些优化规则基本都是在雅虎网站页面性能优化的34条黄金守则基础上制定的。前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；第二类则是代码级别的优化，例如
Javascript中的DOM
操作优化、CSS选择符优化、图片优化以及 HTML结构优化等。

公众号：itest_forever



CSDN:http://blog.csdn.net/itest_2016

QQ群：274166295（爱测未来2群）、610934609（爱测未来3群）

爱测未来合肥测试技术嘉年华第三届正在火热报名中！！！

会场地址：合肥市望江西路666号科大讯飞语音产业基地A1#201会场

时间：2017.07.02（时间暂定）

在线报名表：https://www.sojump.hk/jq/14382135.aspx

技术嘉年华官网：http://itest.iflytek.com/