本文背景

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

本文内容

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

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

（1）个人开发遇到的

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

今天优化的几点如下所示

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

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

（2）小程序setData数据量大

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

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

比如一个商品列表页，用户不断上滑加载数据，而每次加载数据时通常都是将获取的新数据和旧数据通过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渲染数据量大怎么处理

https://developers.weixin.qq.com/community/develop/doc/00006aca4d4f08397b491227851800

（2）https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

（3）https://developers.weixin.qq.com/miniprogram/dev/framework/audits/performance.html

相关截图

f

f

本文总结

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

本文备注

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