专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:秩名
很多使用小程序的用户会反馈,一些小程序会出现卡顿的情况,比如一些电商小程序在打开商品列表需要几秒的缓冲时间,那么微信小程序开发需要如何优化,下面是这篇小程序redux性能优化。
首先了解小程序的工作原理和性能关键点。
小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。
而 evaluateJavascript 的执行会受很多方面的影响,数据到达视图层并不是实时的。
Android 下用户在滑动时会感觉到卡顿,操作反馈延迟严重,因为 JS 线程一直在编译执行渲染,未能及时将用户操作事件传递到逻辑层,逻辑层亦无法及时将操作处理结果及时传递到视图层;
渲染有出现延时,由于 WebView 的 JS 线程一直处于忙碌状态,逻辑层到页面层的通信耗时上升,视图层收到的数据消息时距离发出时间已经过去了几百毫秒,渲染的结果并不实时;
我们在优化性能时,指标是非常重要的,没有指标,你没法知道优化的点是否有效。不能单凭感觉去优化,要根据指标反馈,明确优化的成果。同时,优化就像个无底洞,要注意投入产出比。
用户反馈的卡顿,要么就是js执行消耗资源过多导致处理器没响应,要么是UI渲染消耗资源过多,导致UI没法响应用户操作。
通过查看代码,我们并没有消耗大量计算资源的业务逻辑,但是出现了UI反复操作和抢占资源的现象。
可以利用setData的第二个参数,传入callback函数,统计渲染时长。代码如下
案例分析 1、检查点:是否频繁去setData 检查结果:存在 产生原因:redux中监听的是整个store,只要store变化,就会执行setData操作,这就意味着页面无关的数据改变,也会触发该页面执行setData操作,但是这个操作是无意义的。 问题代码:
解决方案:
只监听当前页面用到的store中的部分数据,只有该部分数据变化,才setData。(store没提供单个数据的监听,如果自己修改redux实现,难度较大,同时修改太底层,容易出不可预料的异常。) 判断页面数据与需要更新数据是否相同,如果相同,不做操作。(这个方案成本比较低,就用它吧)
代码实现:
另外一个优化:如果store数据毫秒级变化怎么办,例如更新购物车的同时,还更新了购物数量,能不能把两次变化合并起来?因为store的数据是共享的,最后一次的更新就是最新的数据,可以采用节流器对请求进行合并。
2、检查点:每次 setData 都传递大量新数据 检查结果:存在 产生原因:
页面存在引用没用到的store数据。 后端返回数据直接进入store,后端接口返回冗余字段。
问题代码:
解决方案:
删除页面无用的connect (老业务在使用,修改存在风险,通过后续迭代优化) 请求后端接口后,拿到数据进行优化处理再把数据传入store(成本较高)
3、检查点:后台态页面进行 setData 检查结果:存在 产生原因:redux connect设计与小程序有差异 问题代码:
小程序生命周期中,onUnload会在页面销毁时执行,例如A->B->C->D 的跳转,A页面一直在监听store的变化,如果D页面修改数据,会造成A,B,C页面也执行setData操作,抢占了D的资源,因此造成卡顿。 解决方案:
后台状态的页面在setData时直接return(目前采用该方法) 当页面隐藏时,移除监听。
代码实现:
但是由于在后台的页面数据没法更新,如果D页面修改A引用的数据,就会出现A引用旧数据问题,所以在onShow的时候做一次同步。
指标测试 做了这么多,到底有没用,拿出来溜一溜就清楚了。 测试平台:iphone7、三星s7 、小程序开发工具 测试流程:首页 -> 配送到家 -> 加入购物车 -> 结算 ->查看订单 测试指标:调用setData次数,渲染总耗时,平均单次渲染耗时
优化后setData次数平均下降150次。 渲染耗时越是卡顿的机器,收益越大,三星s7平均每次渲染耗时降低826ms。
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
微信小程序能够很好连接线下商户与用户之间的关系,并将线上用户有效引流到线下门店,那么对于商户来说,需要如何添加...
如何获得好的运营效益,是微信支付团队和商户共同关心的“商业秘籍”。 在刚刚结束的2018年微信支付成长计划服务商大会...
在微信,如何让用户更便捷地找到你的服务?一搜即可。 今天, 微信“功能直达” 正式开放 ,商家与用户的距离可以更“...
针对部分小程序跳转中暴露出的问题,微信表示将弥补小程序跳转上的缺陷,调整相关规则。具体措施如下:...
新零售模式的发展,传统酒水行业通过开创体验式的经营模式,来提升顾客的个性化服务,已经成为实现酒类行业的热门趋势...
现阶段美容行业的运营很不规范,虽然经过一轮一轮的实践之后,有很多美容店已经了解到信息化管理系统的重要性,但在实...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...