你是如何搭建 Web 前端性能监控系统的?

前端性能会直接影响到用户体验,你是如何去搭建一套 Web 前端性能监控系统的呢?有哪些经验可以分享一下? 包括但不仅限于以下内容: 1、监控了哪些性能的指标? 2、如何去监控这些指标? 3、这些指标的阈值应该是多少?
关注者
1616
被浏览
19140

16 个回答

维度与指标
1. 前端性能指标无非是这几个值:
  • 白屏时间;
  • 首屏时间;
  • 用户可交互时间;
  • 总下载时间;
  • DNS解析时间;
  • TCP连接时间;
  • HTTP请求时间;
  • HTTP响应时间;

2. 关于维度:如果有心思去做IP分析,将「运营商」、「网络」、「URL」作为维度,实际每个指标都可以做出分布图 (图中数据经过处理,非真实数据);
3. 当然还有异常分析。
4. 让各业务线能够定制自己关注的图形或表格,也是很重要的,这点我们做得不错,一整套的前端组件,可以自由定制维度/指标/宽度/时间/图形类型,后端的数据模型也是抽象得很漂亮,几乎兼容任意类型的日志来源,用的Storm实时计算。当然,这个系统涵盖的内容就不仅仅是前端性能了。


如何监控:
百度的同学在「7天打造性能监控系统」说的很清楚了。


阈值:
1. 每个业务形态都不尽相同,不可能有统一的阈值,特别是配置短信/邮件报警的时候。
2. 当用户网络差异大的时候(特别是移动端),平均数其实没什么用,也就看个概况,中位数也同理。比较好的方式还是做堆叠图,方便看分布。
3. 同比环比,报警功能,当然也是需要的。



最后:
给个统计数据,前端性能报警只占所有报警的不足1%,其实大部分公司更关注服务器端(Node也算服务器端)的报警。
前端同学都懂的,讨厌!
先泻药,我补充一点个人的经验吧。。

整个监控体系的流程大体是这样的:

1.前端统计->嵌入和非嵌入的。(js收集或工具,插件监控)
2.真实环境的统计信息 vs 多点的定时监控 (手机用户log或全国机房定时收集性能数据)
3,后端日志数据可视化。

选择什么方法,主要看自己的业务需求场景和成本考虑。
简单的搭建一个简易的监控系统,其实硬件成本就是一台apache或者nginx的机器就好了。

分成3个部分:

1,收集。
收集分为2个方面。
1,定时使用不同网络环境不同地区的机器,用浏览器或者一些模拟浏览器的工具检查监控页面的各项指标,再保存日志。(优点,性能指标准确,缺点,样本太少)
2,js前端收集用户性能指标(需要阙值,否则无用数据太多)(优点,样本足够丰富而且是真实用户数据,缺点,性能指标不准确,一些指标或者根本无法收集,比如dns时间,比如首屏准确时间,最多拿到一个估算值)

其中说一下,最关键得,我们如何测试用户客户端的网速和首屏时间。
1,看到上面有回答说了,首屏时间等于head的加载时间,我知道的几家公司首屏都是按照这个收集,或者说再对页面的所有image进行监控,算出占位是否在首屏线以上,再用图片onload时间作为首屏时间(我就这样收集的,但是其实还是不太准)如果是使用浏览器api或者模拟浏览器的话,可以根据浏览器首屏几个区域的渲染结果当首屏时间来收集,这是最准的。

2,网速,使用前端js收集用户网速,一般都是ajax下载个已知大小文件,然后算网速,很多测速网站都是这种做法,对页面损耗太大了,还有一种做法是,daniellmb/downlinkMax · GitHub 参考navigator.connection的用法,再对应转换用户网络情况。还有一种做法是我们一个页面的输出加载时间结束后,会有一个document ready的事件,这个时候我们认为整个html文档已经下载完毕了,之后我们再用这个经过的时间和html的质量做除法同样可以得到网速,html文档大小/下载总时间 但是这个值说实话也不是特别准。。

2,日志分析和转换。

日志收集上来之后在apache或者nginx日志中是需要经过2次过滤的,一次是找出标记的比如一个gif图的所有日志,之后再根据你的日志规则,找出你的性能相关日志,之后再转换成方便可读的源数据,比如json格式的。

3,求一个稳定均值,之后再进行数据可视化。

所有性能数据拿到之后,我们需要找到一个可以衡量性能的综合值,就比如说拿页面loaded的时间来说,可能有些用户网速极差,有些用户网速又好,导致数据大了之后,曲线非常不稳定,这个时候我们就需要采用一些方法对性能数据进行降噪,方法也比较简单,设置一个阙值,把非常快和非常慢的数据排除,再求一个均值,这个均值应该就是你最后可视化时需要的一个性能指标了。
最后,对数据进行可视化,最好做个web平台界面,可以对数据分段可视化,并且图的效果越酷越好啦,很多做大数据的前端都很擅长这个。。就不多说了。。

到底采用什么方法,因为业务不一样,公司预算不一样,你的应用的访问量也不一样,都会应该根据实际情况来做决定,比如你的页面pv一天为1000w,那你得性能日志,一天也就有至少1000w条了,明显不科学,每天这么保存,成本巨大,所以收集的时候也需要做一些过滤,具体过滤多少,收集多少,还是根据实际pv来做决定吧。。。

一些个人的经验,仅供参考。。
为什么?