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

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

一、前端性能测试目的

前端性能测试对象有HTML、CSS、JS、AJAX等前端技术开发的Web页面,服务端数据返回、网络传输、页面渲染等都会影响用户浏览网页速度。前端性能的指标有:白屏时间、首屏时间、用户可交互时间、总下载时间、DNS解析时间、TCP连接时间、HTTP请求时间、HTTP响应时间。

前端性能测试的目的是计算出包含页面渲染、网络传输以及服务器端解析等综合因素在内的加载时间指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此基础上,给出一定的优化建议和解决方案,从而提升用户体验。

尽管性能如此重要,但是在开发迭代过程中难免会有所忽视,性能会伴随产品的迭代而有所衰减。特别在移动端,网络一直是一个很大的瓶颈,并且页面越来越大、功能越来越复杂,因此需要一套性能监控系统来持续监控、评估、预警页面性能状况、发现瓶颈,指导优化工作的进行。

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

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


1.YSlow

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

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

YslowGrade(等级视图)
爱测未来性能-前端性能测试平台及应用_第1张图片

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

Yslow Components(组件视图)

爱测未来性能-前端性能测试平台及应用_第2张图片

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

Yslow Statistics(统计信息视图)

爱测未来性能-前端性能测试平台及应用_第3张图片

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


2.PageSpeed 

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

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

爱测未来性能-前端性能测试平台及应用_第4张图片

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

爱测未来性能-前端性能测试平台及应用_第5张图片

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

3.WebPagetest

WebPagetest是一款Web应用程序,它将一个URL以及一系列配置参数作为输入,并对那个URL运行性能测试。WebPagetest可配置参数的数量非常多,范围非常广。如果测试结果不只保存在个人的服务器上,就需要安装自己的WebPagetest实例,否则,就必须使用 WebPagetest的公开实例。可以选择任何一组网站地址来进行测试,每个地址都可以用一个或多个浏览器对其进行测试,同时可以指定连接速度以及运行测试的数量。界面如图所示:
爱测未来性能-前端性能测试平台及应用_第6张图片
在图中填写站点urltest locationBrowser后,点击右侧start test即可进行检测站点资源加载情况,如下图所示(此处以jd.com为例)。

爱测未来性能-前端性能测试平台及应用_第7张图片

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

爱测未来性能-前端性能测试平台及应用_第8张图片

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

爱测未来性能-前端性能测试平台及应用_第9张图片

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

三、性能测试平台搭建

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

(1) 前端性能指标数据收集功能:ShowSlow支持通过YSlowPageSpeed等第三方工具将性能数据上报给服务端完成收集(其服务器端提供了针对多达8种不同工具上报的数据收集器dommonsterdynatraceeventsharmetricpagespeedwebpagetestyslow);

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

1.搭建环境

系统:windows XP sp3

ShowSlowshowslow_0.9

浏览器:FireFox 31

Yslow版本:Yslow 3.0.4

AppServ版本:appserv-win32-2.5.10

AppServPHP网页架站工具组合包,作者将一些网络上免费的架站资源重新包装成单一的安装程序,以方便初学者快速完成架站,AppServ所包含的软件有:ApacheApache MonitorPHPMySQLphpMyAdmin等。如果本地机器没有安装过apachephpmysql等系统,那么用这个软件则可以迅速搭建完整的底层环境。

2.安装与配置

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

2)安装完成之后,打开MySql数据库,输入你在安装时填写的密码;

3mysql>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/

爱测未来性能-前端性能测试平台及应用_第10张图片


四、实例介绍

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

爱测未来性能-前端性能测试平台及应用_第11张图片

点击Run Test

爱测未来性能-前端性能测试平台及应用_第12张图片

等级视图:

爱测未来性能-前端性能测试平台及应用_第13张图片

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

爱测未来性能-前端性能测试平台及应用_第14张图片

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

组件视图:

爱测未来性能-前端性能测试平台及应用_第15张图片

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

爱测未来性能-前端性能测试平台及应用_第16张图片

统计信息视图:

爱测未来性能-前端性能测试平台及应用_第17张图片

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

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

公众号:itest_forever

爱测未来性能-前端性能测试平台及应用_第18张图片

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/


你可能感兴趣的:(性能测试)