专栏首页贝克街的捉虫师前端性能监控平台搭建及应用

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

前言

为什么要监控性能

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

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

性能

收益

Google 延迟 400ms

搜索量下降 0.59%

Bing 延迟 2s

收入下降 4.3%

Yahoo 延迟 400ms

流量下降 5-9%

Mozilla 页面打开减少 2.2s

下载量提升 15.4%

Netflix 开启 Gzip

性能提升 13.25% 带宽减少50%

数据来源: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/

本文分享自微信公众号 - 贝克街的捉虫师(BSTester),作者:归根落叶

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-10-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 搭建私有PTS性能测试服务(五)

    下面给大家举一个完整的例子,演示怎么使用nGrinder工具进行注册接口的性能测试。

    归根落叶
  • 测试中的图

    我们首先介绍如何从软件当中产生图及图的基本定义。图当中,如何去选择它的路径,如何产生测试路径。 曾经有人说过,所谓软件测试,就是把软件变成一张图,然后覆盖它。由...

    归根落叶
  • 搭建私有PTS性能测试服务(三)

    用过压力工具的同学们都知道,常常是简单的工具不合用,合用的工具不简单,怎么也得连培训带自己琢磨各种Guide和Manual,好几天时间才能上手。并发量是需要大量...

    归根落叶
  • 如何逐步实现大数据安全运维

    随着智能科技发展的今天,几乎所有的行业客户都将业务系统建立在网络应用的基础之上,互联网的应用与业务的融合给用户带来了巨大的效率提升和持续的竞争力,而在背后默默支...

    企鹅号小编
  • 用eclispe开发web项目初步

    剽悍一小兔
  • 兔子的个数-java

    码农笔录
  • OC知识--成员变量(属性,实例变量)的相关知识

    行走少年郎
  • volatile 关键字(修饰变量)

    是一种比 sychronized 关键字更轻量级的同步机制,访问 volitile 变量时,不会执行加锁操作。

    希希里之海
  • 图表示学习Graph Embedding综述

    最近在学习Embedding相关的知识的时候看到了一篇关于图嵌入的综述,觉得写的不错便把文章中的一部分翻译了出来。因自身水平有限,文中难免存在一些纰漏,欢迎发现...

    Houye
  • 常用nginx配置项详解(一个简单的例子)

    核心提示:Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器...

    后端技术探索

扫码关注云+社区

领取腾讯云代金券