实践总结小程序性能优化(小程序性能测试)

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

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

界面如下:

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

考虑到更好的用户体验，参考美团等订餐小程序，此商品列表数据返回一次。目前的问题是，商品数量多的时候，第一次渲染时间很长，页面会卡死。

优化方向逻辑优化悄声bb:其实原代码(由于历史原因)写的很烂...……OTL

先放一张图

Bb:连小程序都看不下去了，需要警告你。

微信开发者工具有警告，提示也有定位具体代码的位置，所以关键是这个setData！！！

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

具体做法:

1.setData不能一次传输太多数据。如果列表太长，可以单独渲染(比如转换成二维数组，每次循环渲染一个数组)。V1:简单粗糙版

//一次呈现一个类别//假设goodsList是一个二维数组goodslist。foreach ((item，index)= >；{这个。setdata({[` goods list[$ { index }]`]:item } })这样复制代码会有问题。页面首屏渲染快，但是点击页面操作(比如添加购买按钮)会导致页面卡顿，需要一段时间响应，操作的反馈会严重延迟。

其实这是因为这个循环减少了单次setData的个数，却变成了多次setData的循环。我们看第一屏显示的很好，但实际上其他类别(其他数组)还在渲染，线程还在忙，JS线程一直在编译渲染，点击事件不能及时交付给逻辑层，逻辑层不能及时交付操作结果给视图层。

V2:计时器黑客版

由于js线程忙于渲染，我们可以先强制它停止。于是就有了v2定时器的hack版本。

//一次呈现一个分类。let len = data.goodsList？data . goods list . length:0；设idx = 0 let timer = setInterval(()= & gt；{ if(idx & lt；p & gt现在首屏渲染速度的问题解决了，点击按钮响应延迟的问题也解决了。就是代码有点黑，逼强迫症

页面({数据:{...}，//与页面呈现状态无关的数据:{haslogin: false，}，...})//更新的时候直接赋值就可以了。this.state.hasLogin = true。复制代码PS:或者你甚至不需要挂载到page对象下，用普通变量保存即可。

4.图片大小优化如果长列表中的图片大小没有限制，大量的大图片会占用大量内存，可能会导致iOS客户端的内存占用增加，从而触发系统回收小程序页面。除了内存问题，大图也会造成页面切换堵塞。

解决方法是根据当前显示图片区域的大小，拍摄大小刚好合适的图片(2倍-3倍图片)。

图片建议用CDN。一般CDN服务商都会提供一个剪贴图片的接口，然后接口只会返回原图的链接，前端会根据需要传递参数来剪贴图片。前端可以自己编写常用的图像处理方法或者封装图像组件。

CDN服务商的图片剪辑API文档，有常用图片:

阿里云OSS图像缩放七牛云图像处理5。减少不必要的数据请求，比如进入订餐页面，需要获取位置，然后根据位置获取最近的门店。前两个接口需要请求(具体根据业务需求)，最后，如果最近的店铺和上次一样，则不需要再次获取店铺详情和商品数据。

体验优化1。在短时间内合并多个装载提示或订购页面流。如上所述，进入页面需要获取定位接口，然后在定位接口返回结果时取定位值获取最近的店铺，最后请求店铺和商品数据。

这三个接口是串行的。此时如果每个界面都弹出加载提示，会出现加载显示一会儿，消失，显示一会儿，又消失...这种体验不是很好。

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

例如:

设showLoadingTimer = null设showRequestLoading = false//标记是否加载/* * * package request * @ param { * } { show loading:是否加载，选项:请求参数，如url、数据等。} */函数请求({Showloading = true，...options}) {//显示请求加载句柄show loading(show loading)wx . request({...complete () {//关闭request loading HandleShowLoading(false)})}/* *封装请求加载*如果短时间内多次调用ShowLoading，则一起显示。而不是闪烁* @ param show loading */function handleshow loading(show loading){ if(show loading){//来显示加载清除超时(show loading timer)；如果(！showRequestLoading){ showRequestLoading = true；wx . shownavigationbarloading()；wx . show loading({ title:& quot；Loading "，mask:true })} else {//Close loading timer = settimeout(()= > { showRequestLoading = false；wx . hidenenavigationbarloading()；Wx.hiding ()}，200)}}复制代码2。第一次加载整页时，可以使用页面加载动画或者骨架屏来优化加载体验。3.静默获取和更新数据。比如这个订餐页面每次onShow的时候都会调用位置接口，得到最近店铺的界面，但是如果不显示加载，用户就没有感知，体验会更好。

界面优化需要注意界面的粒度控制。因为有时候接口合并，前端可以减少一个请求，体验更好；但有时候如果界面数据太多，响应太慢，可以考虑后面能否获取一些数据，让主页面内容先渲染，按照这个设计拆分界面。

比如在项目的订购页面中，通过获取店铺的商品接口，将原始购物车数据和商品规格弹出窗口中显示的明细数据都一次性返回。但是这个接口本来是为了一次性返回所有商品而设计的，这样会导致后端需要查询的数据太多，表也更多。因此，用于获取购物车的界面和产品细节被拆分到单独的界面中，从而减少了获取商店的产品界面的响应时间，并且可以更快地显示页面。

综上所述，其实上面说的很多逻辑优化和接口优化都是细节，并不是太高深的技术，我们迭代的时候可以关注一下。体验的优化除了前端技术之外，还需要前端学员更加注重用户体验和设计方面的知识，而这也是一个有志前端应该具备的技能...

因此...技术任重而道远。让我们互相鼓励。

这几篇文章你可能也喜欢：

• 练习小程序性能优化(程序性能优化方法)

本文由主机参考刊发，转载请注明：实践总结小程序性能优化(小程序性能测试) https://zhujicankao.com/120836.html