您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

前端性能监控及推荐几个开源的监控系统

时间:2020-08-26 11:12:57  来源:  作者:
前端性能监控及推荐几个开源的监控系统

 

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

1. 监控指标

前端性能指标主要有一下几种:

  • 页面加载耗时:Page Load Time
  • 首屏加载耗时:Above-the-Fold Time
  • 重定向耗时:redirectEnd - redirectStart
  • DNS查询耗时 :domainLookupEnd - domainLookupStart
  • TCP链接耗时 :connectEnd - connectStart
  • HTTP请求耗时 :responseEnd - responseStart
  • 解析dom树耗时 : domComplete - domInteractive
  • 白屏时间 :responseStart - navigationStart
  • DOM ready耗时 :domContentLoadedEventEnd - navigationStart
  • onload时间:loadEventEnd - navigationStart,也即是onload回调函数执行的时间。

除此之外还需要关注接口的成功调用率、接口响应时间、资源加载时间以及前端异常捕获等。

市场上有很多收费的监控系统,像阿里的ARMS等等,我们这里就不讨论了。如果我们从零开发一个完整的前端监控系统的话,还是需要一定的时间的,加上可能人手不足,大部分忙着业务的开发,所以大部分中小公司都选择一些第三方的付费监控系统。

我们有没有可能快速搭建一个上线可用的前端性能系统呢,答案是可以的,就是采用一些开源的前端性能监控系统,加上二次开发。这里我推荐几个给大家。

1. performanceKit

1.1 功能定义

前端基础性能监控

通用的性能监控只能是较简单的基础监控,很多更深入复杂的性能监控,需要针对特定的环境、场景配合页面设计、曝光等条件去定制化设计api,并在合适的地方调用。

例如采集Speed Index、Perceptual Speed Index、视觉完整时间(Visually Complete)、首次有效渲染时长(First Meaningful Paint)等指标。

1.2 npm安装

npm install performance-kits --save

1.3 需要在浏览器环境下

需要支持promise

需要支持performance,且支持performance timeline level2 规范

import performancekit from 'performance-kits';

const { onloadPerformance, switchPerformance, closePerformance } = performancekit;

其中,onloadPerformance用于检测页面onload后各项时间指标,所以要在项目入口文件就引入,不用担心会覆盖项目原有onload的回调,已做过兼容

switchPerformance用于路由切换时使用,需要开发者在监听路由变化的回调中使用。

closePerformance用于离开组件/关闭项目时使用,需要开发者在监听离开或关闭的回调中使用,需友情提示,如果是在关闭项目的回调中使用,那么通过接口上报数据的时候,通信方式请选择sendBeacon。

三个函数均只接受两个参数:

参数一:定时器间隔时间

参数二:总轮询时间

该轮询目的为找到paint类型的entry(需要浏览器兼容支持),进而进行关于渲染的性能监测

1.4 github地址

https://github.com/IndifferenceDoll/performanceKit

2. Webfunny

只需要简单几步就可以搭建一套属于自己的前端监控系统,实时了解线上应用的健康情况!

随时随地连接线上用户,无论何时何地,解决前端问题都易如反掌!

前端开发,后端接口,运营数据,产品分析

2.1 项目总览

监控系统支持多个项目,让所有项目的状态都一目了然。 通过对线上项目的实时分析,让我们可以对线上状况有个非常直观的了解。例如PV、UV数据变化趋势,线上报错、异常等

2.2 错误分析

精细化分析每一个报错问题,支持sourceMap源码定位。

通过探针监控和上报线上环境的报错,以及一些自定义异常。我们对这些日志进行精确的分析,可以准确定位到代码的问题所在。同时能够看到每一个报错的变化趋势,也能够分析出用户在哪一步操作中发生了问题。

2.3 用户细查

深入分析每一个用户,记录下每个用户的所有行为。

由于线上用户的操作行为十分复杂,有些问题可能隐藏在很多次操作之后,所以探针记录了用户的很多操作行为,一旦出现问题,复现BUG也将变得非常简单。 同时,可以使用多种检索条件进行搜索,提高查找效率。

2.4 性能分析

分析页面和接口性能,加载耗时,成功率。

探针对页面的加载性能进行分析,直观反映在报表之上。也对接口的性能进行了分析,如:耗时、成功率等。

3. zanePerfor

zanePerfor目前实现了哪些功能?

3.1 浏览器端(WEB)

  • 页面级的性能上报(多页面 || 单页面应用程序通用)
  • 页面AJAX性能上报
  • 页面所有加载资源性能上报(图片,js,css
  • 页面所有错误信息上报(js,css,ajax)

3.2 微信小程序

  • path路径对应的AJAX性能上报
  • 小程序错误信息上报(js,ajax,img)
  • 用户设备信息及其网络信息上报

3.3 后端界面展示功能(web,小程序通用)

  • 统计每分钟应用的PV,UV,IP信息,统计每天的PV,UV,IP,跳出率,用户访问平均深度
  • 统计实时和每天的应用top最高访问排行,跳出率最高排行
  • 统计实时和每天的全国省份流量热力图
  • 统计每个用户每次访问的行为轨迹


Tags:性能监控   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
性能测试过程中监控系统的CPU、内存、带宽等指标是必须,以前一直使用nmon这款linux系统监控工具进行性能测试过程中的系统监控,但是要形成正式的性能测试报告,就必须要通过nmon...【详细内容】
2021-08-19  Tags: 性能监控  点击:(98)  评论:(0)  加入收藏
一、前言本小节会介绍JVM性能监控,掌握几种常用的监控工具辅助我们更好的了解JVM的性能状态。生产环境中监控JVM性能,分析监控数据,可以知道何时需要JVM调优,可见监控是非常重要...【详细内容】
2020-09-16  Tags: 性能监控  点击:(48)  评论:(0)  加入收藏
web项目性能很重要,开发迭代过程中难免会有所忽视,性能会伴随产品的迭代而有所衰减。特别在移动端,网络一直是一个很大的瓶颈,而页面却越来越大,功能越来越复杂。并没有简单的几...【详细内容】
2020-08-26  Tags: 性能监控  点击:(691)  评论:(0)  加入收藏
关于企业上云,在几年前大家谈论更多的是OpenStack、资源编排和分配,但近几年上云的应用部署方式发生了很多变化。首先从谷歌搜索的趋势可以发现Kubernetes的关注(热度)已经远远...【详细内容】
2020-08-10  Tags: 性能监控  点击:(49)  评论:(0)  加入收藏
通过以下网址打开tomcat管理页面,默认端口为8080(如果不能打开则关闭服务器防火墙或者开放8080端口)...【详细内容】
2020-04-08  Tags: 性能监控  点击:(35)  评论:(0)  加入收藏
​CPU监控命令之mpstat命令 1概述:dstat是可以替代vmstat,iostat,netstat,ifstat的综合型替代品。同时去掉了他们的一些限制并加入了一些额外的特性,更多的组件和灵活性ds...【详细内容】
2020-01-08  Tags: 性能监控  点击:(150)  评论:(0)  加入收藏
也许你有听过一个问题,你这款 web 应用性能怎么样呀?你会回答什么呢?是否会优于海量 web 应用市场呢?本文就来整理下如何进行 web 性能监控?包括我们需要监控的指标、监控的分类...【详细内容】
2020-01-06  Tags: 性能监控  点击:(112)  评论:(0)  加入收藏
现在的应用都是依托层层技术、由工作流中的各个组件构建而成的,应用管理也越来越困难。随着应用的复杂程度不断提高,应用性能监控(APM)工具也需要不断完善。...【详细内容】
2019-12-09  Tags: 性能监控  点击:(124)  评论:(0)  加入收藏
1、uptime命令作用:监控CPU使用情况功能:打印当前时间,系统已经运行了多久,当前登录用户数以及系统平均负载情况。[root@localhost java]# uptime 16:02:01 up 52 min, 2 users,...【详细内容】
2019-11-19  Tags: 性能监控  点击:(228)  评论:(0)  加入收藏
MySQL管理和性能监控工具,能帮助你监控MySQL服务器,以及微调其性能和速度。众所周知,MySQL是功能强大的开源数据库系统,可让企业运行一系列不同的应用,如网站和ERP存储系统。MySQ...【详细内容】
2019-07-31  Tags: 性能监控  点击:(218)  评论:(0)  加入收藏
▌简易百科推荐
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(1)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(9)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(19)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(23)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(24)  评论:(0)  加入收藏
一个项目的大部分API,测试用例在参数和参数值等信息会有很多相似的地方。我们可以复制API,复制用例来快速生成,然后做细微调整既可以满足我们的测试需求1.复制API:在菜单发布单...【详细内容】
2021-12-14  AutoMeter    Tags:AutoMeter   点击:(20)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条