共计 2873 个字符，预计需要花费 8 分钟才能阅读完成。
本文为微信小程序兼容、性能测试方法介绍。
兼容
操作系统兼容
因为小程序依赖微信客户端自身，因而实践上来说只有微信客户端兼容的小程序应该都能够兼容，这里举荐笼罩 Android 和 iOS 支流版本零碎即可，参考如下：
Android 操作系统散布
iOS 操作系统散布
UI 兼容适配
不同屏幕分辨率参考如下，除惯例分辨率外，还应关注刘海屏：
Android 设施分辨率散布
iOS 设施分辨率散布
小程序版本 & 微信版本兼容
小程序的性能实现依赖小程序根底库，而小程序根底库须要依赖微信客户端自身，因而当咱们的小程序应用了某些绝对于微信客户端自带的根底库版本较新的 API 时，就会呈现兼容问题。咱们在测试时应确保测试笼罩到市场占有率较高的微信版本。
为了防止新版本的根底库给线上小程序带来未知的影响，微信客户端都是携带上一个稳定版的根底库公布的。
在新版本客户端公布后，再通过后盾灰度新版本根底库，灰度时长个别为 12 ～ 24 小时，在灰度完结后，用户设施上才会有新版本的根底库。
以微信 6.5.8 为例，客户端在公布时携带的是 1.1.1 根底库（6.5.7 上已全量的稳定版）公布，在 6.5.8 公布后，咱们再通过后盾灰度 1.2.0 根底库。
根底库版本散布
更新工夫：2020 年 6 月 17 日
占比低于 0.01% 的版本已暗藏，灰度公布中的版本也会显示。以下只列出局部库版本进行比照
根底库版本
2.11.2
安卓版本
7.0.13
安卓用户占比
3.08%
iOS 版本
7.0.12
性能
小程序前端性能分为启动性能和运行时性能，启动性能关注启动总耗时、首屏工夫，运行时性能次要关注页面切换耗时和内存耗费、内存异样。
测试方法
微信小程序官网提供了两种性能剖析工具，一个体验评分插件。两个工具别离是性能面板和性能 Trace 工具，而体验评分插件是微信开发者工具中应用，性能 Trace 工具只反对 Android 设施，这里不做介绍。
体验评分工具
应用流程
1. 关上开发者工具，在详情里切换根底库到 2.2.0 或以上版本。2. 在调试器区域切换到 Audits 面板。3. 点击”开始“按钮，而后自行操作小程序界面，运行过的页面就会被“体验评分”检测到。4. 点击“进行 " 则完结检测，在以后面板显示相应的检测报告，开发者可依据报告中的倡议对相应性能进行优化。5. 如需再次运行体验评分，可点击报告上方的“清空体验评分”复原初始状态。请留神，目前零碎不提供报告存储服务，一旦清空体验评分，将无奈再查看本次评分后果。主动运行
为了不便开发者可能及时发现小程序的体验问题，从开发者工具 1.02.1811150 版本起反对体验评分的“主动运行”性能。
该性能会在开发调试小程序时，实时查看，一旦发现体验分数低于 70 分时，零碎会在 console 面板打印一个 warning 信息提醒开发者，此时开发者能够切到 Audits 面板查看详情。
开发者在工具的右上角“详情”面板的 本地设置 中勾选“主动运行体验评分”选项即可开启。
体验评分关注性能板块给出的问题列表即可：
体验评分性能指标
- 首屏工夫
首屏工夫是指用户从关上小程序看到第一屏次要内容的工夫，首屏工夫太长会导致用户长时间看到的都是白屏，影响应用体验。
优化首屏工夫，能够分为以下几种状况：
1. 首屏渲染的内容较多，须要汇合多份数据进行渲染。这种状况须要开发者把内容分优先级，把优先级高的内容做优先展现，缩短白屏工夫；2. 首屏内容依赖的数据从服务端申请的工夫太长。开发者须要从服务端侧具体分析服务端数据返回的工夫长的起因；3. 一次性渲染数据太大或依赖的计算过于简单。缩小渲染的数据量、优化渲染相干数据的算法能够解决这类问题。得分条件：首屏工夫不超过 5 秒
- 渲染工夫
渲染工夫指的是首次渲染或因数据变动带来的页面构造变动的渲染破费的工夫。
渲染界面的耗时过长会让用户感觉卡顿，体验较差，呈现这一状况时，须要校验下是否同时渲染的区域太大（例如列表过长），或渲染依赖的计算是否过于简单。
得分条件：渲染工夫不超过 500ms
- 脚本执行工夫
脚本执行工夫是指 JS 脚本在一次同步执行中耗费的工夫，比方生命周期回调、事件处理函数的同步执行工夫。
执行脚本的耗时过长会让用户感觉卡顿，体验较差，呈现这一状况时，须要确认并优化脚本的逻辑
得分条件：一个执行周期内脚本运行工夫不超过 1 秒
- setData 调用频率
setData 接口的调用波及逻辑层与渲染层间的线程通信，通信过于频繁可能导致解决队列阻塞，界面渲染不及时而导致卡顿，应防止无用的频繁调用。
得分条件：每秒调用 setData 的次数不超过 20 次
- setData 数据大小
因为小程序运行逻辑线程与渲染线程之上，setData 的调用会把数据从逻辑层传到渲染层，数据太大会减少通信工夫。
得分条件：setData 的数据在 JSON.stringify 后不超过 256KB
- 防止 setData 数据冗余
setData 操作会引起框架解决一些渲染界面相干的工作，一个未绑定的变量意味着与界面渲染无关，传入 setData 会造成不必要的性能耗费。
得分条件：setData 传入的所有数据都在模板渲染中有相干依赖
- WXML 节点数
倡议一个页面应用少于 1000 个 WXML 节点，节点树深度少于 30 层，子节点数不大于 60 个。一个太大的 WXML 节点树会减少内存的应用，款式重排工夫也会更长，影响体验。
得分条件：页面 WXML 节点少于 1000 个，节点树深度少于 30 层，子节点数不大于 60 个
- 图片缓存
开启 HTTP 缓存管制后，下一次加载同样的图片，会间接从缓存读取，大大晋升加载速度。
得分条件：所有图片均开启 HTTP 缓存
- 图片大小
图片太大会减少下载工夫和内存的耗费，应依据显示区域大小正当管制图片大小。
得分条件：图片宽高都不超过理论显示宽高的 3 倍
- 申请耗时
申请的耗时太长会让用户始终期待甚至来到，该当优化好服务器解决工夫、减小回包大小，让申请疾速响应。
得分条件：所有网络申请都在 1 秒内返回后果
- 网络申请数
短时间内发动太多申请会触发小程序并行申请数量的限度，同时太多申请也可能导致加载慢等问题，应正当管制申请数量，甚至做申请的合并等。
得分条件：每秒通过 wx.request 发动的申请数不超过 10 个
- 图片申请数
短时间内发动太多图片申请会触发浏览器并行加载的限度，可能导致图片加载慢，用户始终解决期待。应该正当管制数量，可思考应用雪碧图技术或在屏幕外的图片应用懒加载。
得分条件：每秒发动的图片申请数不超过 20 个
- 网络申请缓存
发动网络申请总会让用户期待，可能造成不好的体验，应尽量避免多余的申请，比方对同样的申请进行缓存
得分条件：3 分钟以内同一个 url 申请不呈现两次回包大于 128KB 且截然不同的内容
性能面板
关上办法：进入开发版小程序，进入右上角更多按钮，点击「显示性能窗口」
小程序助手
应用 [小程序助手] 中「性能剖析」板块，来继续关注小程序性能。性能剖析从 启动性能、运行性能和网络性能三个维度提供性能数据，可依据平台、机型、网络环境和拜访起源等条件做精细化剖析。扫描下方小程序码即可立刻体验。
大家可通过以上各点实现小程序优化及性能评测，参考文章：https://www.jianshu.com/p/209…
