文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

性能调试

更新时间：2023/02/13 访问次数：6905

一、简介


目前的小程序性能卡口检测一般都是在线上，研发侧很难通过真机进行性能调优，性能分析工具可在使用小程序开发者工具开发小程序时，无需连接数据线，通过扫码即可在真机上进行小程序性能调试。从启动到运行时记录了从容器侧、框架侧到业务侧的关键数据如：setData render 用时，拉取小程序包，图片等静态资源的用时，网络请求、jsapi等，后续将支持开发者自己打点的性能数据。通过这些性能数据加上机型、小程序框架版本、网络环境为开发者提供精细化分析的可能。

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


二、环境要求


1）淘宝客户端版本：9.20.0 +

2）淘宝开发者工具：https://miniapp-dev.taobao.com/


三、调试流程


image.png


1. 打开性能调试工具


点击左上角工具栏的“性能调试”按钮。


image.png


2. 扫码调试


点击左上角第一个【生成二维码】按钮，生成调试二维码，用淘宝客户端扫码，进入无线性能调试模式。


image.png


3. 开始分析


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

性能调试工具初次加载需要一段时间，加载之后会出现弹窗进行数据收集，等待若干秒或者直接点击 完成收集 来关闭弹窗，可视化展示收集好的数据。


image.png


等待结束之后，工具栏下方显示 已连接 状态，以及基本信息：

1）系统版本；

2）设备信息；

3）平台信息；

4）客户端信息；

5）应用名；

6）小程序框架版本；

7）容器启动时间；

8）用户可交互时间；

9）总静态资源大小；

10）.........


image.png


4. 再次分析


在查看分析结果的同时数据采集仍在自动进行中，可以点击工具栏中第二个按钮【再次分析】按钮来更新已经自动采集但是未展示的新数据。


5. 停止调试


点击调试面板左上角第三个【停止收集】按钮，断开连接，停止性能数据收集。

若要重新开始调试，点击第一个【生成二维码】按钮，重新生成二维码，扫码调试。


6. 分析结果


image.png


1）诊断建议面板


关键性能数据

关键性能数据包括首页启动耗时，容器启动耗时和资源加载总量三项数据，


指标诊断结果

指标诊断结果通过对收集到的数据进行聚合与分析，得出各个规则是否通过的结论，并且对每一个不通过的规则提出优化建议，并给出诊断标准。

对于建议优化项，开发者可以根据相应的优化建议进行针对性优化。


2）时间轴面板


该区域以时间轴的形式对收集的数据进行可视化的展示。


image.png


所有的性能数据分类成三大类：

① Api 端上的 api 调用，并且根据不同的api类型分了二级目录，internalApi 为未分类的数据，具体类型在详情面板中展现；

② Appx 小程序框架的埋点数据：

i）首屏渲染信息；

ii）setData的整个流程时间，从worker层到render层的渲染耗时。

③ Error，JS 或 端上的报错信息。


除此之外对各个关键启动节点的时间在Timings分类下进行了展示，通过对比各个节点的时间点之前的事件来帮助开发者优化请求发送和API调用的编排。


3）详情面板


点击时间轴面板中的任意一条记录，详情中会展示其完整的JSON源数据，并且将一些概要信息如总耗时（Total Time）聚合在详情面板的最上方。


image.png



FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号