小程序性能优化的实践经验总结

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

项目简述 & 问题

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

界面如图：

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

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

优化方向

逻辑优化

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

先放个图

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

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

我们可以先看看官方对于小程序性能以及 setData 优化的一些建议。（developers.weixin.qq.com/miniprogram…）

具体实践：

1. setData 不能一次性传太多数据，如果列表太长，可以分开渲染【比如转化为二维数组，每次循环渲染一个数组】。

v1：简单粗暴版

像上面这样写会有一个问题，页面首屏渲染是快了，但是点击页面操作（比如加购按钮等），页面会卡住，等一下才有反应，操作反馈延迟严重。

其实这是因为，这个循环是把单次 setData 数量减少了，但是却变成了循环多次 setData，我们看着首屏显示好了，但是其实其他分类（其他数组）还在渲染，线程还是忙碌状态，JS 线程一直在编译执行渲染，点击事件不能及时传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层。

v2：定时器hack版

既然js线程忙着渲染，那我们可以强制让它先停下来。于是有了v2的定时器hack版。

3. 跟页面无关的数据不要保存在 data，不要用 setData 更新，因为 setData 会触发页面渲染。

eg：

PS：或者甚至不需要挂载到 page 对象下，直接用普通变量保存。

4. 图片大小优化

在长列表中图片大小如果不加限制，大量的大图会占用很多内存，有可能导致iOS客户端内存占用上升，从而触发系统回收小程序页面。除了内存问题外，大图片也会造成页面切换的卡顿。

解决办法就是根据当前显示的图片区域大小，取尺寸刚好合适（2倍-3倍图）的图片。

建议图片用CDN，一般CDN服务厂商提供图片服务的都会提供裁剪图片的接口，然后接口只返回原图链接，前端根据需要传参数裁剪图片。前端具体做法可以写公共的图片处理方法，或者自己封装图片组件。

附常用图片CDN服务商图片裁剪API文档：

• 阿里云OSS图片缩放

• 七牛云图片处理

5. 减少不必要的数据请求

比如在该点餐页面进入时需要获取定位，然后根据定位获取最近的门店，前面两个接口都需要请求（具体可以根据业务需求），而最后如果获取到的距离最近的门店跟上次一样，则不需要重新获取店铺详情和商品数据。

体验优化

1. 合并短时间内的多个loading提示

还是该点餐页面流程，像上文说过的，进入页面时需要获取定位接口，等定位接口返回结果了再拿定位取值去获取距离最近的店铺，最后才是请求店铺和商品数据。

这三个接口是串行的。此时如果我们每个接口都弹出一个loading提示，就会出现loading显示一会儿，消失，又显示一会儿，又消失……这样的现象，这样的体验是不太好的。

建议可以通过封装请求，并且在请求里统一处理loading，来合并短时间内多次发起请求的多个loading。

eg：

2. 整个页面初次加载时可以使用页面loading动画或骨架屏，优化加载中体验。

3. 静默获取、更新数据

比如这个点餐页每次 onShow 都会调用定位接口和获取最近门店接口，但是不显示loading，用户就没有感知，体验比较好。

接口优化

需要关注接口的粒度控制。 因为有时候合并接口，前端可以减少一次请求，体验更好；但有时候如果接口的数据太多，响应太慢，就可以考虑是否某部分数据可以后置获取，让主要的页面内容先渲染出来，根据这个设计来拆分接口。

比如项目中的点餐页面，原来购物车数据和商品规格弹窗显示的详情数据都是在获取店铺商品接口一次性返回的，而这个接口本来由于设计需要一次返回所有商品，就会造成数据量太大，而且后端需要查询的表也更多。于是把获取购物车，和商品详情接口都拆分为单独的接口，获取店铺商品接口的响应时间就减少了，页面也能更快显示出来。

总结

其实上面提到的逻辑优化和接口优化很多都是细节，并不是太高深的技术，我们平时迭代的时候就可以注意。而体验方面的优化则需要前端同学在前端技术以外更多关注用户体验和设计方面的知识啦，而且这也是一个有追求的前端应该具备的技能……←_←

所以嘛……技术路漫漫，大家共勉吧

以上就是小程序性能优化的实践经验总结的详细内容

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。