关于小程序日常开发优化的几点个人总结 - WXOPEN Club

本文背景

我在前面几篇文章有介绍过，如何通过微信开发者工具来指导我们优化的方向，进而做一些优化的工作，其实在平时的开发中，只要稍微注意下，便可以将小程序代码质量提升一个档次

关于小程序优化，社区也有不少优秀的帖子，但是我觉得通过这种总结，一方面回顾了我个人开发的过程，另一方面将可以加深对这些优化的认知

本文主要优化方向有以下两个来源

（1）个人开发遇到的

（2）查找相关资料，觉得非常不错，可以拿出来分享的

今天优化的几点如下所示

（1）不需要渲染页面的数据要定义在外面，定义成变量，这个优化点主要是解决下面的问题

将未绑定在 WXML 的变量传入 setData

（2）小程序setData数据量大

单次设置的数据不能超过1024kB，详情请阅读开发者文档

比如一个商品列表页，用户不断上滑加载数据，而每次加载数据时通常都是将获取的新数据和旧数据通过concat进行合并在一个数组内，

 

this.setData({

              list: this.data.list.concat(newlist)

            })

这导致数组越来越大，setData渲染时也会越来越慢。

改善方法：

this.setData({

              ['list[' + this.data.list.length + ']']: newlist

            });

这样只是在list中多添加了一个元素，此时，list的结构是这样的：

是一个二维数组，所以在wxml页面循环时要多一层循环。在渲染时不会渲染整个list。

同理，假如现在商品列表有个点赞功能，对某个商品点赞后，只要知道商品在list中的下标位置就可以获取到该商品数据，修改后再用setData渲染：

var goods = this.data.list[0][0];

goods['dianzan']+=1;

 

this.setData({

    ['list[0][0]']: goods

})

这样渲染时也会很快。

（3）wx:if vs hidden

小程序官方文档中描述，wx:if如果在初始渲染条件为false时，框架什么耶不会做，只有当值变为真时，才开始局部渲染。hidden只是简单的控制显示与隐藏，组件始终会被渲染。wx:if有更高的切换消耗，而hidden有更高的初始渲染消耗。

针对上面的描述，我将项目中之前用到的频繁切换显示与隐藏状态的input框，以及上拉加载更多的loading展示，把判断显示条件从wx:if换成了hidden。

（4）存在定时器未跟随页面回收

定时器是全局的，并不是跟页面绑定的，当小程序从一个页面路由到另一个页面之后，前一个页面定时器应注意手动回收

（1）setData渲染数据量大怎么处理

本文主要通过回顾个人开发小程序过程中，采用以及遇到的细节优化，总结出来给自己做个梳理

在计时器清理这个知识点，至于用什么机制，什么逻辑来清理定时器，我计划新开一篇文章，单独聊聊，毕竟在我的答题小程序里面，不管是倒计时，还是正向计时器都是高频存在的场景。

已阅

已阅

占位。期待更多干货~