支付宝小程序 性能调试

2020-09-16 15:51 更新

简介

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

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

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

环境要求

  • 支付宝客户端版本:10.1.62 及以上版本(iOS、Android 均可)
  • 小程序开发者工具版本:0.30 及以上版本

调试流程

未命名文件 (4).png

打开调试面板

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

img

扫码调试

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

img

开始分析

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

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

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

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

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

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

img

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

img

再次分析(可选)

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

img

停止调试

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

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

分析结果

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

面板中的分析结果主要分为诊断建议和 Timeline 两个部分。

数据分析结果.png

诊断建议

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

首页加载性能

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

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

img

指标诊断结果

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

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

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

img

Timeline

该数据区域以时间轴的形式展示,监测小程序运行的整个周期,主要提供三部分数据:

  • MEMORY(MB)、CPU(%)、FPS:以时间轴形式展示内存、CPU、FPS的变化情况;
  • Network(网络请求):展示小程序所有网络请求的 URL 以及具体耗时;
  • MiniApp(函数调用):主要包含 OpenAPI 函数调用情况、App 生命周期函数调用情况、各个页面的函数调用情况,以及各函数的具体耗时。

img

技术支持

如有其它疑问,可钉钉扫描下方二维码,获取技术支持。

image

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号