评测标准

诊断工具从启动性能、跳页性能、最佳实践、操作体验和网络性能五个方面进行评测。

部分启动性能指标含义与跳页性能指标相同,性能报告中区分首页和其它页面,可以更方便地排查启动流程中的问题。

名词解释

  • 长任务: 执行耗时超过 50ms 的函数。
  • 按需注入:仅注入当前访问页面所需的自定义组件和页面代码。
  • 用时注入:开启「按需注入」特性的前提下,「用时注入」可以指定一部分自定义组件不在微信小程序启动时注入,而是在真正渲染的时候才进行注入。

指标清单

分类 指标 未通过标准
启动性能 App 生命周期中的长任务 生命周期函数耗时 > 50ms
避免非必要的全局插件 存在全局引入的插件
使用「按需注入」 未开启「按需注入」
首页重定向 首页启动后立即重定向到其它页面
内联 base64 图片 首页 WXSS 中内联 base64 图片 > 10kB
跳页性能 同步 API 阻塞 页面渲染前多次调用同步 API
页面打开请求 页面纯请求耗时 > 200ms
声明但未使用到的组件 页面访问过程中未使用到的组件
页面生命周期中的长任务 页面生命周期函数耗时 > 50ms
优先展示顶部搜索框 新开页面未优先展示顶部搜索框
进入详情页复用图片 点击图片进入详情页未复用图片导致白屏
最佳实践 缓存 storage 结果 首页重复获取相同键值的本地缓存
合理控制本地缓存大小 本地缓存占用超过 50%
缓存 systemInfo 结果 getSystemInfo 同步&异步接口调用超过3次
避免未处理的 JavaScript 异常 存在未处理的 JavaScript 异常
脚本执行耗时过长 页面方法耗时 > 50ms
避免空的 onPageScroll 函数 存在空的 onPageScroll 函数
缓存 getLocation 结果 30s 内重复调用 getLocation
避免在 scroll 事件处理耗时逻辑 存在 scroll 事件处理耗时 > 10ms 或总耗时 > 150ms
适当调整图片大小 存在图片太大而有效显示区域较小
传送现代格式的图片 使用 webp 替代 JPEGPNG 图片
对图片进行高效编码 对图片进行适当压缩
使用视频格式制作动画内容 大型 GIF 转换为视频更为高效
避免 wx.on 类型接口导致的内存泄漏 页面销毁时仍未移除 wx.on 类型监听器
避免 observe 类型接口导致的内存泄漏 页面销毁时仍未停止 observe 类型监听器
操作体验 轮播组件切换时复用节点 轮播组件切换时未复用节点导致闪白
合理设置可点击元素大小 存在可点击元素宽高 < 20px
交互事件响应迅速 存在交互事件处理耗时 > 50ms 或总耗时 > 150ms
自定义 tabbar 切换时无闪烁 自定义 tabbar 切换时存在闪烁
网络性能 使用 HTTP/2 有请求未使用 HTTP/2
避免网络请求失败 存在网络请求失败
避免网络状态码异常 存在网络状态码异常
减少网络排队数量 网络排队个数>50 或平均排队耗时 > 1500ms

性能诊断工具

简介

为了协助开发者更好地排查微信小程序的性能和体验问题,我们推出了<a href="https://weixin-xiaochengxu-kaifa.yuannext.com">微信小程序</a>性能诊断工具

诊断工具会从启动性能、跳页性能、最佳实践、操作体验和网络性能等方面对微信小程序进行检测,并给出针对性的优化建议,部分指标会尝试给出预估的优化空间。

使用方法

运行环境要求:

  • 基础库使用 3.7.0 及以上版本
  • iOS 客户端版本 >= 8.0.54
  • Android 客户端版本 >= 8.0.55
  • 开发者工具 Nightly >= 1.06.2411272

开发版/体验版 微信小程序可从微信小程序菜单开启诊断工具,正式版本不支持使用。

  1. 右上角菜单-开发调试-开启 Audits-重启并自动开启检测

会自动关闭当前微信小程序,下次打开时自动检测,页面中出现“检测中”标识。进入到需要检测的页面,操作微信小程序。

  1. 右上角菜单-开发调试-关闭 Audits

有任务结束弹窗弹出,点击导出数据有 json 文件分享到微信里。

  1. 将导出的 json 文件拖拽到开发者工具 Audits 面板进行可视化

注意事项

  1. 诊断工具仅在激活后会加载相关代码,并对 开发版/体验版 进行检测,正式版本即使激活也不会生效。
  2. 诊断工具是在运行时检测,覆盖范围依赖开发的操作路径,开发者应可能操作关键路径,触发页面滚动、轮播之类的操作。
  3. 诊断工具是体验评分的升级,少量指标会重叠,诊断工具致力于给出具体的可优化建议。