用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

支付宝小程序性能优化的几点分享

Rolan 2021-1-21 16:45

借着活动分享下项目中的优化,全当抛砖引玉,首先从官方文档给出的性能优化建议开始。

借着活动分享下项目中的优化,全当抛砖引玉,首先从官方文档给出的性能优化建议开始。


控制小程序资源包大小


很多页面、组件或图片资源在项目多次迭代后已经没有在使用到,但没有及时清理,导致影响小程序启动性能。建议删除不再使用的页面、组件或图片资源,使用到的图片资源压缩后从 CDN 加载,并使用 webp 格式的图片,进一步降低图片大小。


优化 setData 逻辑


因为小程序的运行架构(webview 和 worker 之间的项目通信),不合理的 setData 操作对小程序的性能影响很大。


  1. 避免一次设置过多的数据以及频繁调用 setData。
  2. data 上只挂载视图层需要的数据,其余数据可以挂载到页面或组件 this 上。
  3. 嵌套数据结构可以使用 key 为路径的形式更新。
  4. 长列表更新可以使用 $spliceData。


下面是结合业务的优化。


吸顶效果


项目中有些场景需要实现元素吸顶效果,之前是使用 onPageScroll 实现,后面再换成 Intersection 实现,在后面发现目前 css position sticky 的兼容性还挺不错的,而且通过 css 实现的性能要比之前两种方案好很多,重要的是可以少写很多判断的代码,一行样式直接实现。


同时请求多个数据


没有依赖关系的请求可以通过 Promise.all 同时请求,避免依次请求浪费不必要的时间。


数据批量获取


目的还是减少多次发送请求,如果有类似需要频繁通过 id 获取某条数据,可以和后端协商增加批量获取接口。发送 id 数组来获取对应数据。


数据缓存


如果数据在用户访问小程序的整个生命周期内不会改变,可以进一步考虑使用全局变量缓存。读数据时先判断缓存中是否存在,不存在再通过接口获取。因为数据通过变量缓存,可能会占用部分内存,需要权衡两者的利弊。


跳转前请求数据


页面跳转到其它页面有一定时间的延迟,我们可以利用这段时间请求下个页面的数据,降低下个页面的加载时长。


文章转载自:支付宝官方社区  作者:小慕
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏