许多使用小程序的用户会反。。。
，，，，一些小程序会泛起卡顿的情形，
，，，，好比一些电商小程序在翻开商品列表需要几秒的缓冲时间，
，，，，那么微信小程序开发需要怎样优化，
，，，，下面是这篇小程序redux性能优化。。。

首先相识小程序的事情原理和性能要害点。。。

1事情原理 （官方说明）

小程序的视图层现在使用 WebView 作为渲染载体，
，，，，而逻辑层是由自力的 JavascriptCore 作为运行情形。。。在架构上，
，，，，WebView 和 JavascriptCore 都是自力的？？？？？？椋
，，，，并不具备数据直接共享的通道。。。目今，
，，，，视图层和逻辑层的数据传输，
，，，，现实上通过双方提供的 evaluateJavascript 所实现。。。即用户传输的数据，
，，，，需要将其转换为字符串形式转达，
，，，，同时把转换后的数据内容拼接成一份 JS 剧本，
，，，，再通过执行 JS 剧本的形式转达到双方自力情形。。。 
而 evaluateJavascript 的执行会受许多方面的影响，
，，，，数据抵达视图层并不是实时的。。。

2性能要害点（官方说明）

1. 频仍的去 setData 
   在我们剖析过的一些案例里，
   ，，，，部分小程序会很是频仍（毫秒级）的去setData，
   ，，，，其导致了两个效果：

Android 下用户在滑动时会感受到卡顿，
，，，，操作反馈延迟严重，
，，，，由于 JS 线程一直在编译执行渲染，
，，，，未能实时将用户操作事务转达到逻辑层，
，，，，逻辑层亦无法实时将操作处理效果实时转达到视图层；
； 
渲染有泛起延时，
，，，，由于 WebView 的 JS 线程一直处于忙碌状态，
，，，，逻辑层到页面层的通讯耗时上升，
，，，，视图层收到的数据新闻时距离发出时间已经已往了几百毫秒，
，，，，渲染的效果并不实时；
；

1. 每次 setData 都转达大宗新数据 
   由setData的底层实现可知，
   ，，，，pp电子数据传输现实是一次 evaluateJavascript 剧本历程，
   ，，，，当数据量过大时会增添剧本的编译执行时间，
   ，，，，占用 WebView JS 线程，
   ，，，，
2. 后台态页面举行 setData 
   当页面进入后台态（用户不可见），
   ，，，，不应该继续去举行setData，
   ，，，，后台态页面的渲染用户是无法感受的，
   ，，，，另外后台态页面去setData也会抢占前台页面的执行。。。

3怀抱性能指标

我们在优化性能时，
，，，，指标是很是主要的，
，，，，没有指标，
，，，，你没法知道优化的点是否有用。。。不可单凭感受去优化，
，，，，要凭证指标反。。。
，，，，明确优化的效果。。。同时，
，，，，优化就像个无底洞，
，，，，要注重投入产出比。。。 
用户反馈的卡顿，
，，，，要么就是js执行消耗资源过多导致处理器没响应，
，，，，要么是UI渲染消耗资源过多，
，，，，导致UI没法响应用户操作。。。 
通过审查代码，
，，，，我们并没有消耗大宗盘算资源的营业逻辑，
，，，，可是泛起了UI重复操作和抢占资源的征象。。。

4怎样怀抱

可以使用setData的第二个参数，
，，，，传入callback函数，
，，，，统计渲染时长。。。代码如下

1. let startTime = Date.now()
2. this.setData(data, () => {
3. let endTime = Data.now()
4. console.log(endTime - startTime, '渲染时长')
5. })

案例剖析  1、检查点：是否频仍去setData  检查效果：保存  爆发原因：redux中监听的是整个store，
，，，，只要store转变，
，，，，就会执行setData操作，
，，，，这就意味着页面无关的数据改变，
，，，，也会触发该页面执行setData操作，
，，，，可是这个操作是无意义的。。。  问题代码：

1. // libs/redux-wechat/connect.js
2.  
3. // 对整个store举行subscribe。。。转变就执行handleChange
4. this.unsubscribe = this.store.subscribe(handleChange.bind(this, options));
5.  
6. function handleChange(options) {
7. ...省略代码
8. const state = this.store.getState()
9. const mappedState = mapState(state, options);
10. this.setData(mappedState)
11. }

解决方案：

只监听目今页面用到的store中的部分数据，
，，，，只有该部分数据转变，
，，，，才setData。。。（store没提供单个数据的监听，
，，，，若是自己修改redux实现，
，，，，难度较大，
，，，，同时修改太底层，
，，，，容易出不可预料的异常。。。）  判断页面数据与需要更新数据是否相同，
，，，，若是相同，
，，，，不做操作。。。（这个方案本钱较量低，
，，，，就用它吧）

代码实现：

1. // libs/redux-wechat/connect.js
2. // 若是更新的数据和页面数据相同，
   ，，，，不做操作。。。
3. function handleChange(options) {
4. ...省略代码
5. const state = this.store.getState()
6. const mappedState = mapState(state, options);
7. // 若是更新的数据和页面数据相同，
   ，，，，不做操作。。。
8. if (mappedState === this.prevState) return // 新加入代码
9. this.setData(mappedState)
10. // 生涯上一次数据
11. this.prevState = mappedState // 新加入代码
12. }

另外一个优化：若是store数据毫秒级转变怎么办，
，，，，例如更新购物车的同时，
，，，，还更新了购物数目，
，，，，能不可把两次转变合并起来？？？？？？由于store的数据是共享的，
，，，，最后一次的更新就是最新的数据，
，，，，可以接纳节约器对请求举行合并。。。

1. clearTimeout(this.setDataTMO)
2. this.setDataTMO = setTimeout(() => {
3. this.setData(mappedState)
4. }, 50); // 时间可以看情形调解

2、检查点Ｔ媚课 setData 都转达大宗新数据  检查效果：保存  爆发原因：

页面保存引用没用到的store数据。。。  后端返回数据直接进入store，
，，，，后端接口返回冗余字段。。。

问题代码：

1. /pages/user/index.js
2. connect(state => ({
3. member: state.member,
4. mycoupon: state.mycoupon,
5. guessLikeList: state.recommend.guessLikeList,
6. locationInfo: state.common && state.common.locationInfo, //可删除
7. selectedseller: state.home.selectedseller,//可删除
8. carts: state.carts.carts,//可删除
9. ...state.common
10. }))

解决方案：

删除页面无用的connect （老营业在使用，
，，，，修改保存风险，
，，，，通事后续迭代优化）  请求后端接口后，
，，，，拿到数据举行优化处理再把数据传入store（本钱较高）

3、检查点：后台态页面举行 setData  检查效果：保存  爆发原因：redux connect设计与小程序有差别  问题代码：

1. // libs/redux-wechat/connect.js
2. function onLoad(options) {
3. ...省略部分代码
4. if(shouldSubscribe){
5. this.unsubscribe = this.store.subscribe(handleChange.bind(this, options));
6. handleChange.call(this, options)
7. }
8. }
9. function onUnload() {
10. ...省略部分代码
11. // 页面onUnload时，
    ，，，，才扫除监听
12. typeof this.unsubscribe === 'function' && this.unsubscribe()
13. }

小程序生命周期中，
，，，，onUnload会在页面销毁时执行，
，，，，例如A->B->C->D 的跳转，
，，，，A页面一直在监听store的转变，
，，，，若是D页面修改数据，
，，，，会造成A,B,C页面也执行setData操作，
，，，，抢占了D的资源，
，，，，因此造成卡顿。。。  解决方案：

后台状态的页面在setData时直接return（现在接纳该要领）  当页面隐藏时，
，，，，移除监听。。。

代码实现：

1. // 由于在后台的页面setData会抢占前台资源，
   ，，，，以是在后台的页面不要执行setData操作
2. if (this.route !== _getActivePage().route) return

可是由于在后台的页面数据没法更新，
，，，，若是D页面修改A引用的数据，
，，，，就会泛起A引用旧数据问题，
，，，，以是在onShow的时间做一次同步。。。

1. // 后台的页面切换到前台的时间，
   ，，，，做一次数据同步
2. function onShow(options) {
3. if(shouldSubscribe){
4. handleChange.call(this, options)
5. }
6. if (typeof _onShow === 'function') {
7. _onShow.call(this, options)
8. }
9. }

指标测试  做了这么多，
，，，，究竟有没用，
，，，，拿出来溜一溜就清晰了。。。  测试平台：iphone7、三星s7 、小程序开发工具  测试流程：首页 -> 配送抵家 -> 加入购物车 -> 结算 ->审查订单  测试指标：挪用setData次数，
，，，，渲染总耗时，
，，，，平均单次渲染耗时

优化后setData次数平均下降150次。。。  渲染耗时越是卡顿的机械，
，，，，收益越大，
，，，，三星s7平均每次渲染耗时降低826ms。。。

小程序工具提供多类型商城/门店小程序制作，
，，，，可视化编辑 1秒天生5步上线。。。通过拖拽、拼接？？？？？？榻峁剐〕绦蛏坛且趁妫
，，，，所看即所得，
，，，，只需要美工就能做出细腻商城。。。更多小程序市肆请审查：小程序市肆