小程序redux性能优化，三重渲染速度

很多使用小程序的用户会反馈，有些小程序会被卡住，例如，有些电子商务小程序需要几秒的缓冲时间来打开产品列表，那么微信小程序的开发需要进行优化，以下是这个小程序redux的性能优化。

首先要了解小程序的工作原理和性能要点。

1工作原理 （官方说明）

小程序的视图层当前使用WebView作为渲染向量，而逻辑层是作为运行时环境的单独JavascriptCore。在架构上，WebView和JavascriptCore是单独的模块，没有直接数据共享的通道。目前，视图层和逻辑层的数据传输实际上是由双方提供的evaluateJavascript实现的。也就是说，需要将用户发送的数据转换为字符串形式，并将转换后的数据内容拼接成JS脚本，然后通过执行JS脚本将其发送到两个独立的环境。 evaluateJavascript的执行受到许多方面的影响，并且到达视图层的数据不是实时的。

2性能关键点（官方说明）频繁的去 setData 在我们分析过的一些案例里，部分小程序会非常频繁（毫秒级）的去setData，其导致了两个后果：

在Android下，用户在滑动时会感到卡住，操作反馈延迟严重。由于JS线程已经编译并执行渲染，因此用户操作事件未及时传输到逻辑层，并且逻辑层无法及时将操作处理结果传输到逻辑层。查看图层;渲染有一个延迟，因为WebView的JS线程一直很忙，从逻辑层到页面层的通信时间增加，并且视图层接收的数据消息已经过了几百毫秒的时间。结果不是实时的;

每次setData传递大量新数据。 setData的底层实现是已知的。我们的数据传输实际上是一个evaluateJavascript脚本进程。当数据量太大时，会增加脚本执行时间，占用WebView JS线程，后台数据将是setData。当页面进入后台状态（用户不可见）时，它不应该继续setData，后台状态页面的渲染用户感觉不到，而setData的后台状态页面也会抢占前台页面的执行。

3度量性能指标

当我们优化性能时，指标非常重要。如果没有指标，您无法知道优化点是否有效。根据指标的反馈，不能单独感觉优化，以澄清优化的结果。同时，优化就像一个无底洞，注重投入产出比。用户反馈是js执行消耗太多资源而处理器没有响应，或者UI渲染消耗太多资源，导致UI无法响应用户操作。通过查看代码，我们没有很多消耗大量计算资源的业务逻辑，但是存在UI重复操作和抢占资源的现象。

4如何度量

您可以使用setData的第二个参数传递回调函数并计算渲染持续时间。代码如下

设startTime=Date.now（）this.setData（data，（）=> {let endTime=Data.now（）console.log（endTime - startTime，'rendering duration'）}）

案例分析1，checkpoint：是否经常去setData检查结果：有一个原因：redux监听整个商店，只要商店发生变化，就会执行setData操作，这意味着页面无关的数据发生变化，它也会触发页面执行setData操作，但这个操作没有意义。问题代码：

//libs/redux-wechat/connect.js //订阅整个商店。更改handleChangethis.unsubscribe=this.store.subscribe（handleChange.bind（this，options））的实现; function handleChange（options）{.省略代码const state=this.store.getState（）const mappedState=mapState（state，options）; this.setData（mappedState）}

解决方案：

只听当前页面使用的商店中的一些数据，只有部分数据发生变化，setData。 （该商店不提供单个数据监听器。如果修改redux实现，则很难，并且修改过低，很容易产生不可预测的异常。）确定页面数据是否与要更新的数据。如果它们是相同的，请不要操作。 （这个解决方案成本相对较低，只需使用它）

代码实现：

//libs/redux-wechat/connect.js //如果更新的数据与页面数据相同，则不执行任何操作。函数handleChange（options）{.省略代码const state=this.store.getState（）const mappedState=mapState（state，options）; //如果更新的数据与页面数据相同，则不执行任何操作。如果（mappedState===this.prevState）返回//添加代码this.setData（mappedState）//保存最后一个数据this.prevState=mappedState //添加代码}

另一个优化：如果商店数据以毫秒为单位变化（例如更新购物车）和更新购买数量，您可以将两个变化结合起来吗？由于商店的数据是共享的，因此最后一次更新是最新数据，请求可以与限制合并。

clearTimeout（this.setDataTMO）this.setDataTMO=setTimeout（（）=> {this.setData（mappedState）}，50）; //时间可以根据情况

进行调整 2，checkpoint：每次setData传递大量新数据检查结果：存在原因：

该页面有一个引用未使用的商店数据。后端将数据直接返回到存储，后端接口返回冗余字段。

问题代码：

/pages/user/index.jsconnect(state=>（{member: state.member，mycoupon: state.mycoupon，guessLikeList: state.recommend.guessLikeList，locationInfo: state.common＆amp;＆amp; state.common.locationInfo，//可以删除selectseller: state.home.selectedseller，//可以删除购物车: state.carts.carts，//可以删除. state.common}））

解决方案：

删除页面的无用连接（旧业务正在使用，修改风险，通过后续迭代进行优化）请求后端接口后，获取优化数据，然后将数据传递到存储（成本较高）

3，checkpoint：后台状态页面setData检查结果：存在原因：redux连接设计和小程序差异问题代码：

//libs/redux-wechat/connect.jsfunction onLoad（options）{.省略部分代码if（shouldSubscribe）{this.unsubscribe=this.store.subscribe（handleChange.bind（this，options））; handleChange .call（this，options）}}函数onUnload（）{.省略部分代码//页面onUnload，只有未列出的类型this.unsubscribe==='function'＆amp;＆amp; this.unsubscribe（）}

小程序生命周期，onUnload将在页面被破坏时执行，例如，A-> B-＆gt; C-＆gt; D跳转，A页面一直监视存储更改，如果D页面更改数据，则会原因A，B，C页面也执行setData操作，该操作抢占D的资源，从而导致卡。解决方案：

后台状态页面直接在setData中返回（当前使用此方法）。隐藏页面时，将删除侦听器。

代码实现：

//因为后台setData会抢占前台资源，所以不要在后台页面上执行setData操作（this.route！==_getActivePage（。route）return

但是，由于后台的页面数据无法更新，如果D页面修改了A引用的数据，A将引用旧数据问题，因此请在onShow上进行同步。

//当后台页面切换到前台时，执行数据同步功能onShow（options）{if（shouldSubscribe）{handleChange.call（this，options）} if（typeof _onShow==='function'）{_ onShow。打电话（这个，选项）}}

索引测试已经做了很多，它是无用的，当你把它拿出来时很清楚。测试平台：iphone7，三星s7，小程序开发工具测试流程：首页 - ＆gt;送货到家 - ＆gt;加入购物车 - ＆gt;结算 - >查看订单测试指标：调用setData次数，总耗时渲染，平均单次渲染时间

优化后，setData的数量平均下降150次。渲染时间越长，增益越多，三星s7平均每次渲染的时间缩短827ms。

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。