小程序性能Performance监控

kiscon

已于 2024-04-27 21:57:58 修改

阅读量426

点赞数 4

分类专栏：前端点滴文章标签：小程序

于 2024-04-27 21:56:36 首次发布

本文链接：https://blog.csdn.net/kiscon/article/details/135591467

版权

前端点滴专栏收录该内容

22 篇文章 0 订阅

订阅专栏

背景

小程序通常运行在不同的平台（如微信、支付宝、百度等）且用户期望快速、流畅的体验，因此确保其性能表现成为开发者和运营团队的关键任务。性能监控的重要性：

用户体验优化：用户对慢加载、卡顿或崩溃的小程序容忍度低，性能监控可以帮助及时发现并解决这些问题，提升用户体验。
业务影响分析：性能问题直接影响到转化率、用户留存等关键业务指标，通过监控可以量化性能对业务的影响。
资源优化：监控可帮助识别资源消耗过大的功能或代码段，指导开发者进行针对性优化，减少不必要的资源浪费。

性能指标收集

通过 wx.getPerformance 获取navigation、render、script、resource的资源类型数据。

export function usePerformance(config = {}) {
  if (wx.canIUse('getPerformance')) {

    const performance = wx.getPerformance()

    const performanceObserver = performance.createObserver((entryList) => {
      const entries = entryList.getEntries()

      // 获取性能信息
      entries.forEach((entry) => {
        // entryType：navigation、render、script、loadPackage、resource
        switch (entry.entryType) {
          case 'resource': // 收集图片信息
          	break
          case 'script': // 收脚本耗时信息
          	break
          case 'navigation': // 收集路由信息
          	break
          case 'render': // 收集渲染信息
            break
        }
      })
    })

    performanceObserver.observe({ entryTypes: ['render', 'resource', 'navigation', 'script'] })

  } else {
  	// ...
  }
}

wx.getPerformance无法获取接口请求的信息，采用uni.addInterceptor拦截器，对uni.request进行拦截，通过请求拦截记录时间，响应拦截的时候再记录个时间，从而计算出耗时duration。

const collectApiLogMap = new Map()

export function useRequestLog() {
  uni.removeInterceptor('request')

  // 拦截器：https://uniapp.dcloud.net.cn/api/interceptor.html
  uni.addInterceptor('request', {
    invoke(config) {
      const startTime = Date.now()
      const requestId= `${UUID()}-${startTime}`

      config.header.requestId= requestId

      collectApiLogMap.set(requestId, { startTime })
    },
    complete(...args) {
      const [res, config] = args as any;

      if (res.statusCode === 200) {
        // 收集成功响应信息
        // collectResponse({ config, ...res })
      } else {
        // 收集错误响应信息
        // collectError({ config, ...res })
      }
    }
  })
}