本文介绍了微信小程序兼容性和性能测试方法。CompatibleOperatingSystemCompatible由于小程序依赖于微信客户端本身,所以理论上只要微信客户端兼容小程序,就应该是兼容的。这里推荐涵盖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-06-17隐藏占比低于0.01%的版本,同时展示灰度发布版本。下面仅列出部分库版本以供比较。基础库版本2.11.2安卓版本7.0.13安卓用户占比3.08%iOS版本7.0.12性能小程序前端性能分为启动性能和运行时性能。耗时、首屏时间、运行时性能主要集中在页面切换耗时、内存消耗、内存异常等方面。测试方法微信小程序官方提供了两款性能分析工具和一款体验评分插件。这两个工具分别是性能面板和性能追踪工具,体验评分插件是在微信开发者工具中使用的,性能追踪工具只支持安卓设备,这里不再介绍。经验计分工具使用流程1、打开开发者工具,在详情中将基础库切换到2.2.0或以上版本。2.切换到调试器区域中的审计面板。3、点击“开始”按钮,然后自行操作小程序界面,运行过的页面会被“体验值”检测。4.点击“停止”结束检测,并在当前面板显示相应的检测报告。开发者可以根据报告中的建议优化相应的功能。5.如果需要重新运行经验值,可以点击报告上方的“清除经验值”,恢复初始状态。请注意,系统目前不提供报表存储服务。清除体验评分后,您将无法再查看评分结果。自动运行为了方便开发者及时发现小程序的体验问题,开发者工具1.02.1811150版本开始支持体验打分的“自动运行”功能。小程序开发调试时会实时检查该功能。一旦发现经验值低于70分,系统会在控制台面板打印警告信息提示开发者。这时开发者可以切换到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缓存。图像尺寸太大,会增加下载时间和内存消耗。图像大小应根据显示区域的大小合理控制。评分标准:图片的宽高不超过实际展示宽高的3倍。耗时的请求。太长的请求会导致用户等待甚至离开。您应该优化服务器处理时间并减小返回数据包的大小以使请求快速响应。.评分标准:所有网络请求在1秒内返回结果。网络请求数。短时间内发起过多请求会触发小程序并行请求数限制。同时过多的请求也可能导致加载缓慢等问题。合理控制请求数量,甚至合并请求等。评分标准:每秒通过wx.request发起的请求数量不超过10。如果短时间内请求图片过多,会触发浏览器并行加载的限制,可能会导致图片加载缓慢,用户一直在等待处理。数量要合理控制,可以考虑使用sprite技术或者对离屏图片使用懒加载。评分条件:每秒发起的图片请求数不超过20个网络请求。缓存和发起网络请求总是会让用户等待,这可能会造成不好的体验。尽量避免重复请求,比如缓存相同的请求。评分条件:同一个url请求在3分钟内没有出现两次。响应包大于128KB且内容相同。性能面板打开方式:进入开发版小程序,进入右上角的更多按钮,点击“显示性能窗口”小程序助手在“性能分析”部分使用【小程序助手】继续注意小程序的性能。性能分析提供启动性能、运行性能、网络性能三个维度的性能数据,可根据平台、型号、网络环境、访问来源等条件进行精细化分析。扫描下方小程序码,即刻体验。你可以通过以上几点完成小程序的优化和性能评估,参考文章:https://www.jianshu.com/p/209...
