前端监控sdk开发(六)性能时间指标相关

引言

在现代的Web应用开发中,前端监控成为了一个重要的环节。通过监控用户在使用过程中的性能指标,开发人员可以及时发现并解决潜在的性能问题,提升用户体验。而前端监控SDK作为一种常用的工具,可以帮助开发人员收集和分析性能指标数据。本文将详细介绍前端监控SDK中常见的性能指标及其相关内容。

实现

  1. 页面加载时间: 页面加载时间是指从用户请求页面到页面完全加载完成所需的时间。通过测量页面加载时间,我们可以了解到用户在访问网站时所面临的等待时间,并根据结果进行优化。常见的测量方式包括使用Performance API中的timing对象来获取关键事件(如DOMContentLoaded和load)之间的时间差。

  2. 资源加载时间: 资源加载时间是指网页中各个资源(如图片、CSS、JavaScript文件等)从开始加载到加载完成所需的时间。通过监控资源加载时间,我们可以了解到哪些资源对页面性能有影响,并进行相应优化。常见的测量方式包括使用Performance API中的getEntriesByType方法来获取各个资源加载完成所需的时间。

前端监控sdk开发(六)性能时间指标相关

export function timing() {
  let FMP, LCP
  new PerformanceObserver((entryList, observer) => {
    let perfEntries = entryList.getEntries()
    FMP = perfEntries[0]
    observer.disconnect()
  }).observe({ entryTypes: ['element'] })

  new PerformanceObserver((entryList, observer) => {
    let perfEntries = entryList.getEntries()
    LCP = perfEntries[0]
    observer.disconnect()
  }).observe({ entryTypes: ['largest-contentful-paint'] })

  new PerformanceObserver((entryList, observer) => {
    let lastEvent = getLastEvent()
    let firstInput = entryList.getEntries()[0]
    if (firstInput) {
      let inputDelay = firstInput.processingStart - firstInput.startTime
      let duration = firstInput.duration // 处理耗时
      if (inputDelay > 0 || duration > 0) {
        tracker.send({
          kind: 'experience',
          type: 'firstInputDelay',
          inputDelay,
          duration,
          startTime: firstInput.startTime,
          selector: lastEvent
            ? getSelector(lastEvent.path || lastEvent.target)
            : ''
        })
      }
    }
    observer.disconnect()
  }).observe({ type: 'first-input', buffered: true })

  onload(function () {
    setTimeout(() => {
      const {
        connectEnd,
        connectStart,
        domContentLoadedEventEnd,
        domContentLoadedEventStart,
        domInteractive,
        domLoading,
        fetchStart,
        loadEventEnd,
        loadEventStart,
        requestStart,
        responseEnd,
        responseStart
      } = performance.timing

      tracker.send({
        kind: 'experience',
        type: 'timing',
        connectTime: connectEnd - connectStart, // 连接时间
        ttfbTime: responseStart - requestStart, // 首字节到达时间
        responseTime: responseEnd - responseStart, // 响应读取时间
        parseDOMTime: loadEventStart - domLoading, // DOM解析时间
        domContentLoadedTime:
          domContentLoadedEventEnd - domContentLoadedEventStart, //
        timeToInteractive: domInteractive - fetchStart, // 首次可交互时间
        loadTime: loadEventEnd - fetchStart // 完整的加载时间
      })

      let FP = performance.getEntriesByName('first-paint')[0]
      let FCP = performance.getEntriesByName('first-contentful-paint')[0]

      tracker.send({
        kind: 'experience',
        type: 'paint',
        firstPaint: FP.startTime,
        firstContentfulPaint: FCP.startTime,
        firstMeaningfulPaint: FMP ? FMP.startTime : '',
        largestContentfulPaint: LCP.startTime
      })
    }, 2000)
  })
}

这段代码是一个用于性能监测的函数。它使用了Performance API来获取页面加载和用户交互的各个阶段的性能指标,并将这些指标发送给一个名为”tracker”的监测器。

首先,代码定义了两个变量FMP和LCP,用于存储页面的首次有意义绘制(First Meaningful Paint)和最大内容绘制(Largest Contentful Paint)的性能指标。

然后,代码创建了三个PerformanceObserver对象,分别用于监听页面元素加载、最大内容绘制和首次输入延迟事件。当这些事件发生时,回调函数会将相应的性能指标存储到FMP、LCP以及tracker中,并断开观察器。

接下来,在页面加载完成后,代码使用setTimeout函数延迟2秒执行一段逻辑。在这段逻辑中,代码通过performance.timing对象获取了页面加载过程中各个阶段的时间戳,并将这些时间戳计算得到的性能指标发送给tracker。

最后,代码使用performance.getEntriesByName方法获取了首次绘制(First Paint)和首次有意义绘制(First Contentful Paint)的性能指标,并将它们发送给tracker。

总结起来,这段代码通过Performance API获取了页面加载和用户交互过程中的各个阶段的性能指标,并将这些指标发送给一个监测器。

onload.js

一个用于在页面加载完成后执行回调函数的函数。它通过检查 document.readyState 属性来确定页面是否已经完全加载。

export default function (callback) {
  if (document.readyState === 'complete') {
    callback()
  } else {
    window.addEventListener('load', callback)
  }
}

通过判断 document.readyState 是否等于 ‘complete’ 来确定页面是否已经完全加载。

  • 如果页面已经完全加载,则直接执行回调函数。
  • 如果页面还未完全加载,则使用 window.addEventListener 方法监听 ‘load’ 事件,并在事件触发时执行回调函数。 这样,无论是在页面已经完全加载时还是在页面加载完成后,都能确保回调函数被执行。

上述所用到的getLastEventgetStackLinesgetSelector可看前端监控sdk开发(二)js错误捕获

总结

前端监控SDK中的性能指标对于优化Web应用性能至关重要。通过监控页面加载时间、资源加载时间、错误率、用户交互时间以及页面性能评分等指标,开发人员可以及时发现并解决潜在问题,提升用户体验。

原文链接:https://juejin.cn/post/7315244098491645961 作者:俊刚

(0)
上一篇 2023年12月23日 上午11:07
下一篇 2023年12月23日 下午4:00

相关推荐

发表回复

登录后才能评论