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

news/2025/2/13 8:53:08/

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

这是由于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元素

在获取到后端数据的时候增加初始化值
前后代码逻辑忽略:

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

				// ----性能优化方案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;}})}})})


http://www.ppmy.cn/news/1571663.html

相关文章

【Kubernetes的SpringCloud最佳实践】有Service是否还需要Eureka?

在 Kubernetes 中部署 Spring Cloud 微服务时,是否还需要 Eureka 取决于具体场景和架构设计。以下是详细的实践建议和结论: 1. Kubernetes 原生服务发现 vs Eureka Kubernetes 自身提供了完善的服务发现机制(通过 Service 资源)&…

ASUS/华硕幻16 GU603H 原厂 Win10 专业版系统 工厂文件 带ASUS Recovery恢复

华硕工厂文件恢复系统 ,安装结束后带隐藏分区,带一键恢复,以及机器所有的驱动和软件。 支持型号:GU603HR, GU603HM, GU603HE 系统版本:Windows 10 专业版 文件下载:点击下载 文件格式:工厂文…

Unity中Timeline和Cinemachine制作2D动画:镜头篇

在Unity中结合Timeline和Cinemachine制作2D动画,实现电影级的镜头叙事效果。以下是详细的分步教程: 一、环境准备 安装必要包 通过 Window > Package Manager 安装 Cinemachine 和 Timeline。创建2D场景 导入2D角色、背景精灵和动画资源。确保角色已配置Animator Controll…

2024年12月中国电子学会青少年软件编程(Python)等级考试试卷(五级)

青少年软件编程(Python)等级考试试卷(五级) 一、单选题(共25题,共50分) 1.已知x[3,5,7],那么执行语句x[len(x):][1,2]后,x的值?(A) A. [3,5,7,1,2] B. [1,2,3,5,7] C. [3,5,7] D. [1,2] 2.以下…

maven导入spring框架

在eclipse导入maven项目, 在pom.xml文件中加入以下内容 junit junit 3.8.1 test org.springframework spring-core ${org.springframework.version} org.springframework spring-beans ${org.springframework.version} org.springframework spring-context ${org.s…

【Axure视频教程】美化滚动条

今天教大家制作美化滚动条的原型模板,部分效果如下图所示: 教程包括调出滚动条、美化滚动条、隐藏滚动条等内容,无论是新手小白还是有一定基础的同学,都可以学习的哦。 【视频教程——试看版】 【Axure教程】美化滚动条 【完整版…

机器学习模型--线性回归、逻辑回归、分类

一、线性回归 级别1:简单一元线性回归(手工实现) import numpy as np import matplotlib.pyplot as plt# 生成数据 X np.array([1, 2, 3, 4, 5]) y np.array([2, 4, 5, 4, 5])# 手动实现梯度下降 def gradient_descent(X, y, lr0.01, epo…

React 第二十五节 <Fragment></Fragment> 的用途以及使用注意事项详解

文章如果错误偏差&#xff0c;烦请及时批评指正 一、为什么要使用 <Fragment>&#xff1f; 因为在 React 中&#xff0c;组件必须返回单个根元素。当我们尝试直接返回相邻的 JSX 元素时&#xff1a; function BrokenComponent() {return (<h1>标题</h1><…