前端性能监控平台搭建及应用

前言

为什么要监控性能

“If you cannot measure it, you cannot improve it” ———— William Thomson

这是一个最基本的问题，为什么要关注和监控前端性能？对于公司来说，性能在一定程度上与利益直接相关。国外有很多这方面的调研数据：

数据来源：http://www.slideshare.net/bitcurrent/impact-of-web-latency-on-conversion-rates http://stevesouders.com/docs/jsdayit-20110511.pptx

为什么性能会影响公司的收益呢？根本原因还是在于性能影响了用户体验。加载的延迟、操作的卡顿等都会影响用户的使用体验。尤其是移动端，用户对页面响应延迟和连接中断的容忍度很低。想象一下你拿着手机打开一个网页想看到某个信息却加载半天的心情，你很可能选择直接离开换一个网页。谷歌也将页面加载速度作为 SEO 的一个权重，页面加载速度对用户体验和 SEO 的影响的调研有很多。

尽管性能很重要，开发迭代过程中难免会有所忽视，性能会伴随产品的迭代而有所衰减。特别在移动端，网络一直是一个很大的瓶颈，而页面却越来越大，功能越来越复杂。并没有简单的几条黄金规则就可以搞定性能优化工作，我们需要一套性能监控系统持续监控、评估、预警页面性能状况、发现瓶颈，指导优化工作的进行。

以上引自：7 天打造前端性能监控系统 <http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/>

而根据我们公司的实际情况，服务器架构的调整，前端性能的优化都做了很多，但是具体优化了多少，性能提升了多少，相对于竞品我们的差距或者优势在哪里，目前都没有很清晰的数据做支撑，所以搭建一套性能监控平台，不管是监控自己的产品还是竞争对手的产品，都是很有必要的，今天来说说怎么搭建一套适合我们的前端性能监控平台。

工具

下图是监控平台的大致架构图

Showslow：用于数据的收集及展示

Jenkins：用于定制化的监控执行，比如需要登录的站点，监控移动端的站点，定时执行等

Yslow：对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化

NetExport：将http页面加载的详细性能数据导出为har文件，上报给Showslow

PageSpeed：类似于Yslow

Phantomas：基于Phantomjs的前端性能分析工具

phantomjs：前端自动化测试工具，这里用于自动化导出HAR数据并上报给Showslow

HARViewer：HAR文件可视化查看工具

以上工具的安装和使用，网上有很多介绍的文章，也可参考官方帮助文档，这里就不复述了，后续再给大家整理，下面说说具体怎么应用。

如何使用

自动化测试

自动化测试有两种方式，一是由Jenkins定时执行的项目进行管理，另外一个是由ShowSlow每24小时定时执行的任务。

Jenkins

利用Jenkins自定义执行的任务，可以模拟手机端或者PC端的站点，也可以测试登录后的一些页面，具体操作如下：

测试PC端站点：

如上图所示配置相关站点列表及信息，开始构建即可，构建完成后，就可以到ShowSlow中查看结果了。

测试手机端站点：

手机端的站点配置跟PC端的一样，只是UserAgent配置选择模拟手机的即可，默认已是，所以不用再更改。等Jenkins项目构建完成后，就可以到ShowSlow中查看结果了，以下是结果示例：

ShowSlow

也可以直接在ShowSlow中添加需要监控的站点，不过只能监控不需要登录的PC端的站点，具体操作如下：

进入ShowSlow主页，点击“Add a URL”

需要先登录，如果没有账号，请先自行注册一个。

登录后，在这里页面输入需要监控的地址即可，刚添加的地址并不能马上看到测试结果数据（ShowSlow貌似有点问题），每天零点会定时执行一次任务。

利用Jenkins执行的测试，用Phantomas测试的数据还没有自动上报给ShowSlow统计，测试结果的数据很多，后续会筛选需要的度量项后实现自动上报，目前可以先通过查看Jenkins控制台输出的信息查看结果，部分如下所示。

开发本地调试

前端开发在调优的过程中，ShowSlow也可以收集数据，用于开发参考，目前只支持FireFox浏览器，需要安装几个插件。

具体配置可以参考这里：http://yourshowslowhost/configure.php

安装了Yslow插件后，启动结果自动上报，可将结果实时的上报给ShowSlow，当然得开启调试模式的情况下。

安装了Firebug和NetExport插件后，可以将HAR数据手动上报给ShowSlow做后续分析。对于前端资源加载情况的分析，我建议用这种方式，比较真实，利用Phantomjs导出的HAR数据一部分时间是没有获取到的，比如DNS解析时间等。

参考资料： http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days/ http://www.showslow.org/Main_Page https://github.com/ariya/phantomjs/blob/master/examples/netsniff.js https://github.com/TronGeek/phantomas http://yslow.org/phantomjs/