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

阳光穿透心脏的1/2处 2022-06-14 00:26 330阅读 0赞

性能测试一直是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（等级视图）

![Center][]

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

**Yslow Components（组件视图）**

**![Center 1][]**

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

**Yslow Statistics（统计信息视图）**

**![Center 2][]**

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

2.PageSpeed

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

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

![Center 3][]

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

![Center 4][]

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

## 3.WebPagetest ##

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

![Center 5][]

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

![Center 6][]

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

![Center 7][]

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

![Center 8][]

图中显示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/][http_localhost_showslow]。

![Center 9][]

# 四、实例介绍 #

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

![Center 10][]

**点击Run Test：**

![Center 11][]

**等级视图：**

![Center 12][]

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，优化建议如下：

![Center 13][]

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

**组件视图：**

![Center 14][]

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

![Center 15][]

**统计信息视图：**

![Center 16][]

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

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

公众号：itest\_forever

![Center 17][]

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/

[Center]: /images/20220614/1187cc98c4564f76a7b5d1f705205cee.png
[Center 1]: /images/20220614/085eb66da6ad446a8799086e46a86d2a.png
[Center 2]: /images/20220614/ef1921bd5f40452cb0b0973f05603e50.png
[Center 3]: /images/20220614/fc91284d9e5648699de005df907400ec.png
[Center 4]: /images/20220614/44552606af144d468174be0b01cacaef.png
[Center 5]: /images/20220614/177d1d6cc60444b2bb896f98d9ec01de.png
[Center 6]: /images/20220614/540b2714472a43afb9f9581226975faf.png
[Center 7]: /images/20220614/c8aac8f437494c7484ce792b5142e26d.png
[Center 8]: /images/20220614/0162ab56b4bb49b3a649ed97d624d6ae.png
[http_localhost_showslow]: http://localhost/showslow/
[Center 9]: /images/20220614/7b84e005416f4522820ad98b5af5b5a1.png
[https_www.baidu.com]: https://www.baidu.com/
[Center 10]: /images/20220614/86f084820e4640b68a2afe6fe104a2ca.png
[Center 11]: /images/20220614/26162a36276348f9a2b7b56d53d75955.png
[Center 12]: /images/20220614/87c3799dd13b4bbda03e1e511e825ead.png
[Center 13]: /images/20220614/dc0c6b9bfd3c49ea82cc7b43aee459ae.png
[Center 14]: /images/20220614/c963a4bba69a48269043b58b0262591e.png
[Center 15]: /images/20220614/e6111ee971534cb48e239eb3c76a3fc1.png
[Center 16]: /images/20220614/3a17111be6f64ca9b59ce74b5d44d33d.png
[Center 17]: /images/20220614/561a6e8abe724b6a8b21ea1f23e39124.png