如何通过实践总结实现小程序性能的深度优化？

本文共计2525个文字，预计阅读时间需要11分钟。

微信小程序开发教程总结：小程序性能优化。项目概述：本项目涉及问题及初步介绍以下项目，是一个比较常规的点餐小程序。界面如图：左侧是分类菜单，右侧是长列表，包含多个分类。

左侧分类菜单，右侧长列表

微信小程序开发教程栏目总结小程序的性能优化。

项目简述 & 问题

先简单介绍一下项目，就是一个比较常规的点餐小程序。

界面如图：

左边是分类菜单，右边是长列表，有多个分类的商品，单个分类滚动完后可以继续滚动切换到下一个分类，同时左边的分类菜单选中态会跟着切换到当前商品列表显示的分类。

考虑到更好的用户体验，以及参考了美团等点餐小程序，这个商品列表的数据是一次性返回的。目前遇到的问题就是，当商品数量比较多时，首次渲染时间很长，而且页面会卡顿。

优化方向

逻辑优化

小声bb：其实就是原来代码（由于历史原因）写得太烂了……OTL

先放个图

小声bb：连小程序都看不下去了，要警告了

微信开发者工具都有警告了，而且提示里面也有定位到具体代码的位置，所以关键就是这个 setData ！！！

我们可以先看看官方对于小程序性能以及 setData 优化的一些建议。