本文整理自网络,侵删。
体验评分是一项给小程序的体验好坏打分的功能,它会在小程序运行过程中实时检查,分析出一些可能导致体验不好的地方,并且定位出哪里有问题,以及给出一些优化建议。
运行环境要求
- 下载并安装 1.02.1808300 或以上版本的开发者工具,下载地址。
- 基础库需要切到 2.2.0 或以上版本。
使用流程
- 打开开发者工具,在详情里切换基础库到 2.2.0 或以上版本。
- 在调试器区域切换到 Audits 面板。
- 点击”开始“按钮,然后自行操作小程序界面,运行过的页面就会被“体验评分”检测到。
- 点击 “停止" 则结束检测,在当前面板显示相应的检测报告,开发者可根据报告中的建议对相应功能进行优化。
- 如需再次运行体验评分,可点击报告上方的“清空体验评分”恢复初始状态。请注意,目前系统不提供报告存储服务,一旦清空体验评分,将无法再查看本次评分结果。
自动运行
为了方便开发者能够及时发现小程序的体验问题,从开发者工具 1.02.1811150 版本起支持体验评分的 “自动运行” 功能。
该功能会在开发调试小程序时,实时检查,一旦发现体验分数低于 70 分时,系统会在 console 面板打印一个 warning 信息提示开发者,此时开发者可以切到 Audits 面板查看详情。
开发者在工具的右上角 “详情” 面板的 本地设置 中勾选 “自动运行体验评分” 选项即可开启。
评分规则
具体的评分细则和详情的规则说明可参考下列文档:
1、评分方法
目前体验评分共有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 | |
合理的颜色搭配 | 0 | |
最佳实践 | 避免JS异常 | 3 |
避免网络请求异常 | 3 | |
废弃接口 | 2 | |
使用HTTPS | 1 | |
避免setData数据冗余 | 1 | |
最低基础库版本 | 0 | |
移除不可访问到的页面 | 0 | |
WXSS使用率 | 0 | |
及时回收定时器 | 0 |
2、性能
1. 首屏时间
首屏时间是指用户从打开小程序看到第一屏主要内容的时间,首屏时间太长会导致用户长时间看到的都是白屏,影响使用体验。
优化首屏时间,可以分为以下几种情况:
- 首屏渲染的内容较多,需要集合多份数据进行渲染。这种情况需要开发者把内容分优先级,把优先级高的内容做优先展示,缩短白屏时间;
- 首屏内容依赖的数据从服务端请求的时间太长。开发者需要从服务端侧具体分析服务端数据返回的时间长的原因;
- 一次性渲染数据太大或依赖的计算过于复杂。减少渲染的数据量、优化渲染相关数据的算法可以解决这类问题。
得分条件:首屏时间不超过 5 秒
2. 渲染时间
渲染时间指的是首次渲染或因数据变化带来的页面结构变化的渲染花费的时间。
相关阅读 >>
更多相关阅读请进入《微信小程序》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者