随手记:小程序setData 数据传输长度为 XXXKB,存在有性能问题!小程序长列表性能优化,uni.createIntersectionObserver

在一些小程序列表的页面,总是会看到小程序控制台的黄色警告:

这是由于data 数据过大,导致的问题

方法:

1.避免setData的数据过大,小于1024kb。

2.避免调用频繁,保证数据实时性。

3.避免未绑定在WXML的变量传入setData,也就是不显示的数据不写入方法中。

4.不需要使用的字段让后端删除

5.尽量避免大循环

6.尝试使用uni.createIntersectionObserver

重点尝试uni.createIntersectionObserver

传送门:https://uniapp.dcloud.net.cn/api/ui/intersection-observer.html#createintersectionobserver

思路参考:

用户在划动列表的时候,离开可视范围的数据卸载dom元素,在接近可视范围的时候挂在dom元素,这样可以减少dom元素的数量以达到性能优化的目的

获取到数据的时候给数据初始化增加单个item是否展示的show,默认为true,单个item初始化的实例值为null,单个item的高度为0,然后获取到单个item的id,给每个item绑定一个createIntersectionObserver实例,这个实例返回的参数有个intersectionRatio为相交点的值,如果intersectionRatio为0则表示当前这个item不在可视范围,可以卸载dom元素,不等0的时候就是item在可视范围之内,需要展示dom元素

在获取到后端数据的时候增加初始化值

前后代码逻辑忽略:

获取到数据之后,做生成实例处理:

javascript 复制代码
				// ----性能优化方案
				this.$nextTick(() => {
					this.prescriptionList.forEach(item => {
						// 判断为创建过实例
						if(!item.observer) {
							// 创建并返回一个 IntersectionObserver 对象实例
							item.observer = uni.createIntersectionObserver(this);
							// 指定页面显示区域作为参照区域之一,假设windowHeight=617,即超出屏幕上方617*2px和超出屏幕下方617*2px时,则把dom元素v-if隐藏
							console.log('this.$system.windowHeight', this.$system.windowHeight,'this.$system.windowHeight')
							item.observer.relativeToViewport({ top: this.$system.windowHeight * 2, bottom: this.$system.windowHeight * 2 })
							.observe(`#${item.virtualId}`, res => {
								/**
								 * 指定目标节点并开始监听相交状态变化情况。回调函数callback包含一个参数result。observe(selector, [callback])
								 * intersectionRatio:相交比例-最大值1-最小值0,0~1区间
								*/
							   item.intersectionRatio = res.intersectionRatio;
								if(res.intersectionRatio === 0) {
									// 超过预定范围,从页面卸载dom元素
									item.virtualShow = false;
								}else {
									// 达到预定范围,将dom元素渲染进页面
									item.virtualShow = true;
									// 拿到当前item的高度
									item.itemHeight = res.intersectionRect.height;
								}
							})
						}
					})
				})
相关推荐
大叔_爱编程2 小时前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
说私域12 小时前
消费品行业创新创业中品类创新与数字化工具的融合:以开源 AI 智能客服、AI 智能名片及 S2B2C 商城小程序为例
人工智能·小程序·开源
说私域12 小时前
开源AI大模型赋能的S2B2C商业生态重构研究——基于智能名片系统的体验认知与KOC背书机制
人工智能·小程序·重构·开源
咸虾米_12 小时前
uniapp微信小程序获取用户手机号uniCloud云开发版
微信小程序·小程序·uni-app·unicloud·获取手机号
然后就去远行吧17 小时前
小程序API —— 55页面处理函数 -上拉加载
小程序
MaCa .BaKa21 小时前
27-衣橱管理系统(小程序)
java·vue.js·spring boot·小程序·架构·uni-app·maven
万亿少女的梦16821 小时前
场馆预约小程序的设计与实现
小程序
往日情怀酿做酒 V17639296381 天前
微信小程序逆向开发
微信小程序·小程序
幽络源小助理1 天前
智能家庭财务管理系统:微信小程序+SSM框架解决方案
微信小程序·小程序