分类： 指南

评分方法

目前体验评分共有27条规则，共分为三类：性能、体验、最佳实践，满足规则要求得分（100分），否则不得分（0分），最后根据各规则权重和公式计算出总得分。

权重为0的规则，表示该规则不参与评分，仅作为提示项。开发者可在开发者工具中可以点击“忽略”。

各规则的得分条件也可能会随微信小程序的版本更新有一定的调整。

权重如下表

分类 规则 权重
性能 脚本执行时间 7
首屏时间 6
渲染时间 6
setData调用频率 6
setData数据大小 6
WXML节点数 6
请求耗时 5
网络请求数 5
图片请求数 5
图片缓存 4
图片大小 4
网络请求缓存 2
体验 开启惯性滚动 8
避免使用:active伪类来实现点击态 8
保持图片大小比例 4
可点击元素的响应区域 3
iPhone X兼容 3
窗口变化适配 3
合理的颜色搭配 0
最佳实践 避免JS异常 3
避免网络请求异常 3
废弃接口 2
使用HTTPS 1
避免setData数据冗余 1
最低基础库版本 0
移除不可访问到的页面 0
WXSS使用率 0
及时回收定时器 0

规则说明

详细的规则说明可参考下列文档：

  • 性能
  • 体验
  • 最佳实践

体验评分

体验评分是一项给微信小程序的体验好坏打分的功能，它会在微信小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。

基础库 3.7.0 版本推出了微信小程序性能诊断工具，作为体验评分的升级，可直接在真机进行性能测试。

运行环境要求

  • 下载并安装 1.02.1808300 或以上版本的开发者工具，下载地址。
  • 基础库需要切到 2.2.0 或以上版本。

使用流程

  1. 打开开发者工具，在详情里切换基础库到 2.2.0 或以上版本。
  2. 在调试器区域切换到 Audits 面板。
  3. 点击”开始“按钮，然后自行操作微信小程序界面，运行过的页面就会被“体验评分”检测到。

start

  1. 点击 “停止” 则结束检测，在当前面板显示相应的检测报告，开发者可根据报告中的建议对相应功能进行优化。
  2. 如需再次运行体验评分，可点击报告上方的“清空体验评分”恢复初始状态。请注意，目前系统不提供报告存储服务，一旦清空体验评分，将无法再查看本次评分结果。

start

自动运行

为了方便开发者能够及时发现微信小程序的体验问题，从开发者工具 1.02.1811150 版本起支持体验评分的 “自动运行” 功能。

该功能会在开发调试微信小程序时，实时检查，一旦发现体验分数低于 70 分时，系统会在 console 面板打印一个 warning 信息提示开发者，此时开发者可以切到 Audits 面板查看详情。

开发者在工具的右上角 “详情” 面板的 本地设置 中勾选 “自动运行体验评分” 选项即可开启。

autorun

评分规则

具体的评分细则和详情的规则说明可参考下列文档：

  • 评分方法
  • 性能
  • 体验
  • 最佳实践

性能面板

从微信 6.5.8 开始，我们提供了性能面板，让开发者了解微信小程序的性能。开发者可以在开发版微信小程序下打开性能面板，打开方法：进入开发版微信小程序，进入右上角更多按钮，点击「显示性能窗口」。

image

性能面板指标说明

指标 说明
CPU 微信小程序进程的 CPU 占用率，仅 Android 下提供
内存 微信小程序进程的内存占用（Total Pss），仅 Android 下提供
启动耗时 微信小程序启动总耗时
下载耗时 微信小程序包下载耗时，首次打开或资源包需更新时会进行下载
页面切换耗时 微信小程序页面切换的耗时
帧率/FPS
首次渲染耗时 页面首次渲染的耗时
再次渲染耗时 页面再次渲染的耗时（通常由开发者的 setData 操作触发）
数据缓存 微信小程序通过 Storage 接口储存的缓存大小

FPS 面板

基础库 2.22.1 开始支持，低版本不生效。

为了便于开发者调试渲染层的交互性能，微信小程序基础库提供了选项开启 FPS 面板，开发者可以实时查看渲染层帧率。

启用方式

在 app.json 中，如下配置，则可在微信小程序启用 FPS 面板，展示当前的实时帧率、及当前时间窗口内的帧率波动范围。

{
  "debugOptions": {
    "enableFPSPanel": true
  }
}

请注意不要把这个配置项带到正式版本。

使用说明

  • FPS 面板是通过 webview 的 requestAnimationFrame 回调，使用 canvas 绘制的，本身可能会有一些额外的性能开销，但一般情况下可以忽略；
  • FPS 面板可以拖动到屏幕的任意位置；
  • 未启用同层渲染时，FPS 面板可能会被原生组件遮挡。

微信小程序开发者工具「模拟器」和「调试器」

微信开发者工具的「模拟器」和「调试器」，可以帮助开发者利用工具模拟微信小程序的表现，也包括了性能分析的能力。

需要开发者工具 1.05.2201240 及以上版本支持

逻辑层 JavaScript Profile

开发者可以使用「模拟器」中的「Performance」或「JavaScript Profiler」面板，分析微信小程序逻辑层的 JS 执行情况。

如果要分析启动过程中微信小程序代码注入的情况，可以点击「Performance」左上角第二个 reload 按钮。

详细的使用说明可参考 Chrome 的「Performance」、「JavaScript Profiler」面板

逻辑层内存调试

与真机调试 2.0 类似，开发者可以使用「模拟器」中的「memory」面板，获取微信小程序逻辑层的 JS 堆内存快照，分析内存分布情况，排查内存泄漏问题。

详细的使用说明可参考 Chrome 的「Memory」面板

视图层调试

需要最新工具 nightly 版本支持

开发者可以在模拟器底部打开当前页面的「视图层」调试工具。在工具中，可以通过「Performance」、「memory」、「Layer」、「Rendering」等面板调试微信小程序视图层的性能。

详细的使用说明可参考 Chrome 的对应面板

低端机模拟

开发者可以在模拟器中开启「低端机模拟」，开发者工具会对 CPU 使用等进行一定限制，模拟低端机的使用体验。

真机调试 2.0

微信开发者工具的「真机调试 2.0」功能，可以帮助开发者利用工具调试真机上的微信小程序表现，也包括了性能分析的能力。开启真机调试 2.0 的步骤请参考《真机调试 2.0 文档》。

内存调试

仅支持安卓设备

开发者可以使用「memory」面板，获取微信小程序逻辑层的 JS 堆内存快照，分析内存分布情况，排查内存泄漏问题。

详细的使用说明可参考 Chrome 的「Memory」面板

JavaScript Profiler

仅支持安卓设备

开发者可以使用「JavaScript Profiler」面板，分析微信小程序逻辑层的 JS 执行情况。如果要分析启动过程中微信小程序代码注入的情况，可以在代码中使用 debugger 来断点。

// app.js
debugger

App({
  onLaunch() {}
})

详细的使用说明可参考 Chrome 的「JavaScript Profiler」面板

性能与体验调试工具

为了协助开发者调试与优化微信小程序的性能与体验，我们提供了一些工具：

  • 真机调试 2.0：通过开发者工具调试真机运行环境。
  • 开发者工具「模拟器」和「调试器」：在开发者工具「模拟器」中对微信小程序视图层分析和进行低端机模拟，在「调试器」环境中进行 JS 性能、内存占用分析。
  • 代码质量分析面板：静态分析开发者代码，给出优化建议。
  • FPS 面板：展示页面当前的实时帧率
  • 性能面板
  • 体验评分：自动化检测微信小程序性能与体验问题，并为开发者提供优化建议。

产品体验分析

查看详细介绍
产品体验分析是一款帮助微信小程序提升拉新、留存、付费转化率的数据分析工具。它能够可视化还原用户操作现场，精准定位产品交互体验缺陷或功能bug。

功能介绍

会话回放

对于用户每一次与应用交互的全部过程，都会真实记录并进行回放。你可以查看用户在此次会话中的具体操作行为。

热力图

直观展示大多数用户是如何使用你的产品。你可以查看用户在产品使用中鼠标点击、页面停留的位置。分析页面元素的曝光度，优化页面信息展示。

转化分析

探索不同页面与事件的流量流转，绘制用户体验地图，发现并优化用户流失问题，提升用户转化率与留存率。

开始体验

前往查看操作说明

评测标准

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

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

名词解释

  • 长任务: 执行耗时超过 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 替代 JPEG 和 PNG 图片
对图片进行高效编码 对图片进行适当压缩
使用视频格式制作动画内容 大型 GIF 转换为视频更为高效
避免 wx.on 类型接口导致的内存泄漏 页面销毁时仍未移除 wx.on 类型监听器
避免 observe 类型接口导致的内存泄漏 页面销毁时仍未停止 observe 类型监听器
操作体验 轮播组件切换时复用节点 轮播组件切换时未复用节点导致闪白
合理设置可点击元素大小 存在可点击元素宽高 < 20px
交互事件响应迅速 存在交互事件处理耗时 > 50ms 或总耗时 > 150ms
自定义 tabbar 切换时无闪烁 自定义 tabbar 切换时存在闪烁
网络性能 使用 HTTP/2 有请求未使用 HTTP/2
避免网络请求失败 存在网络请求失败
避免网络状态码异常 存在网络状态码异常
减少网络排队数量 网络排队个数>50 或平均排队耗时 > 1500ms