背景
小程序通常运行在不同的平台(如微信、支付宝、百度等)且用户期望快速、流畅的体验,因此确保其性能表现成为开发者和运营团队的关键任务。性能监控的重要性:
- 用户体验优化:用户对慢加载、卡顿或崩溃的小程序容忍度低,性能监控可以帮助及时发现并解决这些问题,提升用户体验。
- 业务影响分析:性能问题直接影响到转化率、用户留存等关键业务指标,通过监控可以量化性能对业务的影响。
- 资源优化:监控可帮助识别资源消耗过大的功能或代码段,指导开发者进行针对性优化,减少不必要的资源浪费。
性能指标收集
- 通过 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 })
}
}
})
}
数据呈现
- 通过上面的方式,可以收集到小程序中的路由、渲染、资源加载耗时指标,以及接口耗时时长
- 收集后,通过接口上报到内部日志平台(如:kibana)
- 再结合grafana进行数据查询及可视化
各页面FCP值图:
总结
本次仅作为参考,记录实践的过程。
核心代码参考,执行 npm install log-sdk-miniprogram
可了解部分源码