评论

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

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

本文背景

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

本文内容

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

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

(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


本文总结

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


本文备注

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

最后一次编辑于  08-12  
点赞 1
收藏
评论

3 个评论

  • wang li
    wang li
    08-13

    已阅

    08-13
    赞同
    回复
  • 谋谋谋
    谋谋谋
    08-12

    已阅

    08-12
    赞同
    回复
  • 青寒
    青寒
    08-12

    占位。期待更多干货~

    08-12
    赞同
    回复
登录 后发表内容