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

引言

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

实现

页面加载时间：页面加载时间是指从用户请求页面到页面完全加载完成所需的时间。通过测量页面加载时间，我们可以了解到用户在访问网站时所面临的等待时间，并根据结果进行优化。常见的测量方式包括使用Performance API中的timing对象来获取关键事件（如DOMContentLoaded和load）之间的时间差。
资源加载时间：资源加载时间是指网页中各个资源（如图片、CSS、JavaScript文件等）从开始加载到加载完成所需的时间。通过监控资源加载时间，我们可以了解到哪些资源对页面性能有影响，并进行相应优化。常见的测量方式包括使用Performance API中的getEntriesByType方法来获取各个资源加载完成所需的时间。

js 复制代码

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 属性来确定页面是否已经完全加载。

js 复制代码

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

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

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

上述所用到的getLastEvent 、getStackLines 、getSelector 可看前端监控sdk开发（二）js错误捕获

总结

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