前端监控系统之性能监控｜8月更文挑战

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

前言

本篇文章主要是说明如何实现了前端层面的性能指标/错误信息以及定位/资源监控等数据的收集。

为什么要做前端监控？

• 比用户更快的发现问题，并可以快速定位到问题及时修复
• 收集加载/访问指标，为用户体验方向优化提供正确方向
• 对面向用户的网站进行收集用户行为，支撑决策的重要依据

第三方监控服务

有sentry，神策，Fundebug等。

监控的大体流程

1. 实现监控sdk可以对性能指标和错误进行监控(收集源)
2. 上传接口
3. 数据清洗和日志存储
4. 报表展示
5. 监控报警

后续…

1. 问题处理
2. 辅助分析
3. 外部平台接入
4. …..

性能监控

性能监控是指我们写的网页在用户的端上所体现的数据指标

性能监控主要是借助了 window.performance 这个api。处理这个api我们可以获得

1. 上一个页面的卸载时间 p.fetchStart - p.navigationStart
2. 页面的重定向时间 p.redirectEnd - p.redirectStart
3. DNS查找时间 p.domainLookupEnd - p.domainLookupStart
4. TCP建联时间 p.connectEnd - p.connectStart
5. 网络层面的总耗时 p.connectEnd - p.navigationStart
6. chrom发送数据到服务端接收到的时间 p.responseStart - p.requestStart
7. 请求数据的用时 p.responseEnd - p.responseStart
8. 请求页面的总耗时 p.responseEnd - p.requestStart
9. dom的解析时间 p.domComplete - p.domLoading
10. loadEvent时间 p.loadEventEnd - p.loadEventStart
11. 前端层面的总时间 p.loadEventEnd - p.domLoading
12. 页面完全加载时间 p.loadEventEnd - p.navigationStart
13. dom开始渲染的耗时 p.domContentLoadedEventStart - p.navigationStart
14. 用户操作可被响应的时间 p.domInteractive - p.navigationStart
15. 首字节时间 p.responseStart - p.navigationStart

getPerfData: p => {
				let data = {
          // 网络建联
          prevPage: p.fetchStart - p.navigationStart, // 上一个页面的卸载时间
          redirect: p.redirectEnd - p.redirectStart, // 重定向时间， 两个网页非同域则为0
          dns: p.domainLookupEnd - p.domainLookupStart, // DNS查找时间
          connect: p.connectEnd - p.connectStart, // TCP建联时间
          network: p.connectEnd - p.navigationStart, // 网络总耗时， 前面的加起来

          // 网络接收
          send: p.responseStart - p.requestStart, // 前端从发送到接收的时间
          receive: p.responseEnd - p.responseStart, // 请求数据用时
          request: p.responseEnd - p.requestStart, // 请求页面的总耗时

          // 前端渲染
          dom: p.domComplete - p.domLoading, // dom解析时间
          loadEvent: p.loadEventEnd - p.loadEventStart, // loadEvent时间
          frontend: p.loadEventEnd - p.domLoading, // 前端总时间

          // 关键阶段
          load: p.loadEventEnd - p.navigationStart, // 页面完全加载时间
          domReady: p.domContentLoadedEventStart - p.navigationStart, // dom准备时间， 白屏时间
          interactive: p.domInteractive - p.navigationStart, // 可操作时间，用户的点击可以被响应了
          ttfb: p.responseStart - p.navigationStart // 首字节时间
        }
        return data
}
复制代码

• 当 performance.timing.domComplete 完成则说明dom已经加载完成，我们可以向服务端上报数据了

// 监测dom加载完成
let runCheck = () => {
  if (performance.timing.domComplete) {
    // 如果监测到dom解析完成，则停止循环监测，运行callback
    clearTimeout(timer)
    getPerfData(window.performance.timing) //得到性能指标
    perfData.type = 'domready'
    callback(perfData)
    isDOMReady = true
  } else {
    // 再去循环检测
    timer = setTimeout(runCheck, 100)
  }
}
复制代码

• 当performance.timing.loadEventEnd 完成则说明页面加载完成，我们可以向服务端上报数据了

let runCheck = () => {
  if (performance.timing.loadEventEnd) {
    // 这个可以判断dom加载完成了
    // 如果监测到dom解析完成，则停止循环监测，运行callback
    clearTimeout(timer)
    getPerfData(window.performance.timing) //得到性能指标
    perfData.type = 'onload'
    callback(perfData)
    isOnload = true
  } else {
    // 再去循环检测
    timer = setTimeout(runCheck, 100)
  }
}
复制代码

性能的一些指标

参考文章

PerformanceObserver.observe

paint-timing

event-timing

LCP

FMP

time-to-interactive