文档

# qq.getPerformance

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

基础库 1.48.0 开始支持

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

QQ mac版本：暂不支持

QQ windows版本：暂不支持

# 使用方法示例

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

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

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

← 加密 →