支付宝小程序扩展能力 附录 3：性能调试工具

简介

小程序性能调试可在使用小程序开发者工具开发小程序时，无需连接数据线，通过扫码即可在真机上进行小程序性能调试。调试过程中，工具可以对采集到的性能数据进行分析，并针对检测到的性能问题给出相应的优化建议。

这个功能使得开发者在小程序开发阶段就可以随时在本地进行性能调优，进而提升小程序的性能体验。

说明：内存不足会导致小程序偶现卡顿，建议清理内存并通过性能调试进行自查。

设计目的

• 用于检测首页启动耗时、首页流量消耗、首页平均内存三项数据；

其中首页启动耗时由于机型单一，易受网络影响，故不以首页启动耗时为标准；

• 图片资源检测；

• js 函数耗时检测，

环境要求

• 支付宝客户端版本：10.1.62 及以上版本（iOS、Android 均可）；
• 小程序开发者工具版本：0.30 及以上版本。

调试流程

打开调试面板

点击 IDE 功能面板里的 实验室 ，显示工具列表，选择列表中的 性能调试，右侧出现性能调试面板。

扫码调试

点击调试面板左上角第一个（或者屏幕中间）的白色圆圈 开启扫码 按钮，生成调试二维码。然后使用支付宝客户端扫码，则进入了性能调试模式。

开始分析

• 扫码进入调试模式后，客户端会打开小程序，并自动开始收集小程序性能数据。

• 调试面板顶部工具栏右侧会显示：已覆盖页面、当前页面。

• 工具栏下方显示收集进度、已连接 状态，以及以下具体信息：

• 设备信息
• 系统版本
• 客户端信息
• 小程序名称
• 小程序 ID
• 小程序版本号

• 弹出窗口的显示内容有：状态、时间和进度信息。

• 性能数据收集几秒后，弹窗会自动消失，对当前时间段内已采集到的数据进行诊断分析。

• 弹窗自动消失后，分析结果会全部显示在调试面板中。且此时，性能数据仍在继续采集中，可点击调试面板左上角第二个有动效的 再次分析 按钮即可再次分析，刷新诊断结果。

再次分析（可选）

首次分析完成后，可点击调试面板左上角第二个 开始分析 按钮，进行再次分析，诊断结果会刷新至当前最新，同时在面板分析结果时间轴中显示一条分割线，用于区分时间间隔。

停止调试

点击调试面板左上角第三个 停止采集 按钮，断开连接，停止性能数据采集。若再次点击，则会清空面板数据。

若要重新开启调试，点击第一个 开启扫码 按钮，重新生成二维码，扫码调试即可。

分析结果

分析采集到的小程序性能数据，得到分析结果。

诊断建议

诊断建议包含两个部分：首页加载性能、指标诊断结果。

首页加载性能

首页加载性能包括首页启动耗时、首页流量消耗、首页平均内存三项数据。

每一项数据均给出了标准值以供参考。若某项性能未能符合标准，该项性能的数据将显示为红色。

指标诊断结果

指标诊断结果显示为两个有着具体数量的分类：建议优化项、通过项。

每项诊断结果均给出了诊断标准，也可点击展开按钮查看诊断详情。

对于建议优化项，将给出相应的优化建议，开发者可进行针对性优化。