# qq.getPerformance

获取当前小程序性能相关的信息。

基础库 1.48.0 开始支持

暂不支持小程序插件\小程序开发者工具调试

# 使用方法示例

const performance = qq.getPerformance(); // ==> Performance对象

// 在onReady及之后的生命周期,可以尝试直接获取已产生的性能数据
console.log(performance.getEntries());

// 也可通过监听的方式,持续获取产生的性能数据
performance
  .createObserver((entryList) => {
    console.log(entryList.getEntries());
  })
  .observe({ entryTypes: ["render", "script", "navigation"] });
1
2
3
4
5
6
7
8
9
10
11

# API 详情

# Performance

Performance 对象,用于获取性能数据及创建性能监听器

// 创建全局性能事件监听器
Performance.createObserver(function(EntryList){}) ==> PerformanceObserver

// 该方法返回当前缓冲区中的所有性能数据
Performance.getEntries() ==> Array.<PerformanceEntry>

// 获取当前缓冲区中所有名称为 [name] 且类型为 [entryType] 的性能数据
Performance.getEntriesByName(string name, string entryType) ==> Array.<PerformanceEntry>

// 获取当前缓冲区中所有类型为 [entryType] 的性能数据
Performance.getEntriesByType(string entryType) ==> Array.<PerformanceEntry>

// 设置缓冲区大小,默认缓冲 30 条性能数据
Performance.setBufferSize(number size) ==> void

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# PerformanceObserver

PerformanceObserver 对象,用于监听性能相关事件

// 开始监听
PerformanceObserver.observe(entryTypes);

// 停止监听
PerformanceObserver.disconnect();

// 获取当前支持的所有性能指标类型
PerformanceObserver.supportedEntryTypes ==> Array
1
2
3
4
5
6
7
8

# EntryList

EntryList 对象


// 该方法返回当前列表中的所有性能数据
EntryList.getEntries() ==> Array.<PerformanceEntry>

// 获取当前列表中所有名称为 [name] 且类型为 [entryType] 的性能数据
EntryList.getEntriesByName(string name, string entryType) ==> Array.<PerformanceEntry>

// 获取当前列表中所有类型为 [entryType] 的性能数据
EntryList.getEntriesByType(string entryType) ==> Array.<PerformanceEntry>
1
2
3
4
5
6
7
8
9

# PerformanceEntry

单条性能数据。

属性 类型 说明
name string 指标名称
entryType string 指标类型
startTime number 开始时间,不同指标的具体含义会有差异。
duration number 耗时 ms。仅对于表示阶段的指标有效。
path string 页面路径。仅 render 和 navigation 类型指标有效。
navigationStart number 路由真正响应开始时间。仅 navigation 类型指标有效。
navigationType string 路由详细类型,与小程序路由方法对应。仅 navigation 类型指标有效。

# entryTypes 指标类型

属性 说明
navigation 路由
render 渲染
script 脚本

# name 指标名称

属性 说明
appLaunch 小程序启动耗时。(entryType: navigation)
route 路由处理耗时。(entryType: navigation)
firstRender 页面首次渲染耗时。(entryType: render)
firstPaint 页面首次绘制(FP)时间点,无 duration。(iOS 不支持)(entryType: render)
firstContentfulPaint 页面首次内容绘制(FCP)时间点,无 duration。(iOS 14.5 以下版本不支持)(entryType: render)
largestContentfulPaint 页面最大内容绘制(LCP)时间点,无 duration。(iOS 不支持)(entryType: render)
evaluateScript 逻辑层 JS 代码注入耗时。(entryType: script)

# 更多介绍

# 指标详细说明

  • appLaunch:小程序启动耗时
    • 起点为用户点击小程序图标,或小程序被拉起的时间
    • 终点为首个页面 firstRender 结束时间
  • route:页面切换耗时
    • 起点为触发页面切换
    • 终点为页面切换动画完成
  • firstRender:页面首次渲染耗时
    • 起点为逻辑层收到路由事件,包括逻辑层页面与组件初始化、VD 同步、渲染层执行渲染的时间
    • 终点为页面 onReady
  • firstPaint(FP):页面首次绘制
  • firstContentfulPaint(FCP):
  • largestContentfulPaint(LCP):
  • evaluateScript:逻辑层 JS 代码注入(含编译和执行)耗时

FP、FCP、LCP 只是一个时间点,而非一个时间段,无 duration

在获取到数据后,开发者可以自行上报、分析。

# 影响启动耗时的因素

对于同一个小程序,以下因素会直接影响大盘平均启动耗时:

  • 平台: 不同平台下(安卓、iOS等)设备性能、操作系统、框架实现、优化方案存在较大差异,启动耗时也存在较大的差异。只有分平台比较启动耗时(包括各阶段的耗时)才有意义。
  • 下载比例: 代码包下载和更新都会显著影响小程序启动耗时,在其他流程耗时稳定的情况下,下载比例升高会影响大盘启动耗时。
  • 入口页面: 不同页面启动时,根据所在分包的不同,需要下载的代码包数量和大小和代码注入量都存在差异。不同页面渲染耗时也存在差异。
  • 机型分布: 启动耗时和设备性能有较强关联,不同小程序或使用场景用户群体的差异可能导致机型分布的差异,进而影响大盘启动耗时。
  • 网络环境: 网络环境主要影响网络请求的耗时,如小程序信息获取、代码包下载等。

此外,下列情况也会间接影响启动耗时:

  • 场景/访问来源: 不同场景下,用户访问的页面不同,新用户比例也有差异,对启动耗时会有一定影响。此外,用户访问的目的性和自身的等待意愿也有差异,也会影响打开率。
  • 首次访问用户比例: 用户首次访问小程序时,需要完整的进行小程序信息准备、代码包下载的流程,代码缓存也需要重新生成,启动耗时会比非首次访问高。
  • 小程序版本更新: 小程序版本更新时,用户需要更新小程序信息和代码包,代码缓存也需要重新生成,启动耗时会出现上涨。