常用的前端监控可视化依赖库前端监控方案

转载

lazihuman 2024-04-15 12:38:32

文章标签 常用的前端监控可视化依赖库前端性能监控加载数据性能监控 文章分类 运维

前端监控一般分为三种，分别为页面埋点、性能监控以及异常监控。

页面埋点

页面埋点应该是大家最常写的监控了，一般起码会监控以下几个数据：

PV / UV
停留时长
流量来源
用户交互

对于这几类统计，一般的实现思路大致可以分为两种，分别为手写埋点和无埋点的方式。

相信第一种方式也是大家最常用的方式，可以自主选择需要监控的数据然后在相应的地方写入代码。这

种方式的灵活性很大，但是唯一的缺点就是工作量较大，每个需要监控的地方都得插入代码。

另一种无埋点的方式基本不需要开发者手写埋点了，而是统计所有的事件并且定时上报。这种方式虽然

没有前一种方式繁琐了，但是因为统计的是所有事件，所以还需要后期过滤出需要的数据。

性能监控

性能监控可以很好的帮助开发者了解在各种真实环境下，页面的性能情况是如何的。

对于性能监控来说，我们可以直接使用浏览器自带的 Performance API 来实现这个功能。
performance 是一个全局对象。我们在控制台里输入 window.performance，就可一窥其全貌：

关键时间节点

在 performance 的 timing 属性中，我们可以查看到如下的时间戳：

这些时间戳与页面整个加载流程中的关键时间节点有着一一对应的关系：

通过求两个时间点之间的差值，我们可以得出某个过程花费的时间，举个🌰：

const timing = window.performance.timing
 // DNS查询耗时
 timing.domainLookupEnd - timing.domainLookupStart// TCP连接耗时
 timing.connectEnd - timing.connectStart// 内容加载耗时
 timing.responseEnd - timing.requestStart

···

const timing = window.performance.timing
// DNS查询耗时
timing.domainLookupEnd - timing.domainLookupStart
  
// TCP连接耗时
timing.connectEnd - timing.connectStart
 
// 内容加载耗时
timing.responseEnd - timing.requestStart

···

除了这些常见的耗时情况，我们更应该去关注一些关键性能指标：firstbyte、fpt、tti、ready 和 load 时间。这些指标数据与真实的用户体验息息相关，是我们日常业务性能监测中不可或缺的一部分：

// firstbyte：首包时间 
 timing.responseStart – timing.domainLookupStart// fpt：First Paint Time, 首次渲染时间 / 白屏时间
 timing.responseEnd – timing.fetchStart// tti：Time to Interact，首次可交互时间 
 timing.domInteractive – timing.fetchStart// ready：HTML 加载完成时间，即 DOM 就位的时间
 timing.domContentLoaded – timing.fetchStart// load：页面完全加载时间
 timing.loadEventStart – timing.fetchStart

以上这些通过 Performance API 获取到的时间信息都具有较高的准确度。我们可以对此进行一番格式处理之后上报给服务端，也可以基于此去制作相应的统计图表，从而实现更加精准、更加个性化的性能耗时统计。

此外，通过访问 performance 的 memory 属性，我们还可以获取到内存占用相关的数据；通过对 performance 的其它属性方法的灵活运用，我们还可以把它耦合进业务里，实现更加多样化的性能监测需求——灵活，是可编程化方案最大的优点。