vue大数据量列表渲染性能优化:虚拟滚动原理
前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下,我们讲了两种实现方式来提高渲染性能:前端分页和节点数据懒加载。
前端分页小节:Vue3扁平化Tree组件的前端分页实现
节点数据懒加载小节:Element Tree Plus版功能演示:数据懒加载
关于扁平化结构Tree和嵌套结构Tree组件的渲染
嵌套结构的Tree组件是一种递归渲染,性能上比起列表结构的
v-for渲染比较一般。对于这种渲染方式,在数据量很大的情况下,只有通过懒加载可以提高渲染性能;而扁平化结构则有更多的选择,前端分页是一种方式,还有一种更好的选择,就是本节介绍的虚拟滚动。

下一小节,我们将对自定义JuanTree组件来应用虚拟滚动,解决数据量非常大的情况下的用户体验良好的高性能渲染。本小节讲原理和基本demo的实现,喜欢的点个赞,关注下,后续会更精彩!
功能演示

虚拟滚动的原理

demo实现
编写vitepress示例

滚动条的实现
考虑到原生滚动条太丑,我们使用element-plus提供的el-scrollbar组件,因为它简单好用且展示也很美观。
element plus在基于vite的vue3 tsx项目的整合请参考:vite tsx项目的element plus集成 - 按需引入踩坑
demo示例源码
src/components/VirtualList.vue
实现非常简单易懂!
<script setup lang="ts">
import { computed, ref } from 'vue'const containerHeight = 24 * 12 // 容器高度
const itemHeight = 24 // 列表项高度
const visibleCount = Math.ceil(containerHeight / itemHeight) // 可视区域列表元素数量
const totalCount = 1000 // 列表元素总数
const data = ref(Array.from({ length: totalCount }).map((_, index) => ({ value: index })))
// 起始索引
const startIndex = ref(0)
// 可视区域的数据
const visibleData = computed(() => data.value.slice(startIndex.value, startIndex.value + visibleCount))
// 数据列表在Y轴的偏移量
const offsetY = ref(0)
const onScroll = (event: any) => {const scrollTop = event.scrollTop// 按照滚动的高度触发可视区域数据计算属性的重新计算。startIndex.value = Math.floor(scrollTop / itemHeight)// 同步更新数据列表元素translate3d样式y轴的偏移量,确保其始终与视口的最上端对齐offsetY.value = scrollTop
}
</script><template><el-scrollbar class="vl-container" :height="containerHeight" @scroll="onScroll"><div class="vl-wrapper"><!-- 展示滚动条 --><divclass="vl-blank":style="{height: `${totalCount * itemHeight}px`}"></div><!-- 数据列表 --><divclass="vl-data":style="{transform: `translate3d(0, ${offsetY}px, 0)`}"><div class="item" v-for="(item, index) in visibleData" :key="index">Item {{ item.value }}</div></div></div></el-scrollbar>
</template><style scoped lang="scss">
.vl-wrapper {position: relative;.vl-blank {position: absolute;top: 0;right: 0;left: 0;}
}
</style>
相关文章:
vue大数据量列表渲染性能优化:虚拟滚动原理
前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下,我们讲了两种实现方式来提高渲染性能:前端分页和节点数据懒加载。 前端分页小节:Vue3扁平化Tree组件的前端分页实现 节点数据懒加载小节:Element Tree Plu…...
昇思25天学习打卡营第1天|快速入门
目录 昇思MindSpore介绍MindSpore的API来快速实现一个简单的深度学习模型通过资料更深入的了解昇思MindSpore 昇思MindSpore介绍 今天有幸学习了昇思MindSpore,让我们来简单的了解一下它 昇思MindSpore是一个全场景深度学习框架,旨在实现易开发、高效执行…...
LinkedList 实现 LRU 缓存
LRU(Least Recently Used,最近最少使用)缓存是一种缓存淘汰策略,用于在缓存满时淘汰最久未使用的元素。 关键: 缓存选什么结构? 怎么实现访问顺序? import java.util.*;public class LRUCac…...
ubuntu安装workon
pip install virtualenvpip install virtualenvwrapper配置virtualenvwrapper。在你的shell配置文件(比如.bashrc,.bash_profile或.zshrc)中添加以下内容:export WORKON_HOME$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON/…...
(面试必看!)锁策略
文章导读 引言考点一、重量级锁 VS 轻量级锁1、定义与原理2、主要区别3、适用场景 考点二、乐观锁 VS 悲观锁1、悲观锁(Pessimistic Locking)2、乐观锁(Optimistic Locking)3、总结 考点三、读写锁1、读写锁的特性2、读写锁的实现…...
RAGflow:开源AI框架的创新与应用
在当今科技飞速发展的时代,人工智能(AI)已经成为各行各业不可或缺的一部分。特别是在文档处理和数据分析领域,AI的应用更是无处不在。今天,我要向大家介绍一个开源的AI框架引擎——RAGflow。它能够在深度文档理解方面执…...
AI的学习明确路径
1.不要一开始学习数学。 首先,学习python的语法和工具包。 python的工具包有:numpy,pandas,matlap,sciklt-learn. 然后,学习机械学习算法,学习1.树模型,随机森林 。 2.神经网络。 上kaggle中,找人家的经…...
【C++】巧用缺省参数与函数重载:提升编程效率的秘密武器
C语法相关知识点可以通过点击以下链接进行学习一起加油!命名空间 本章将分享缺省参数与函数重载相关知识,为了更加深入学习C打下了坚实的基础。本章重点在于缺省参数与函数重载使用前提与注意事项 🌈个人主页:是店小二呀 …...
mysql排查死锁的几个查询sql
SHOW PROCESSLIST; select * from information_schema.INNODB_TRX; select * from information_schema.INNODB_LOCKS; select * from information_schema.INNODB_LOCK_WAITS;...
快速部署私有化大模型 毕昇(使用docker-compose方式)
docker安装 1. # Linux系统安装docker,以CentOS/RHEL为例,其他操作系统请参考docker官方安装方法 # 如果已经安装过docker 期望重装,先卸载 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \d…...
B端:导航条就框架提供的默认样式吗?非也,看过来。
导航条不一定必须使用框架提供的默认样式,你可以根据项目需求和设计风格进行自定义。通过使用框架提供的自定义选项、CSS样式覆盖、自行设计或者使用其他UI库或组件,你可以实现独特且符合需求的导航条样式。 下面发一些参考给友友们,可以让设…...
idea的git与SVN切换
1、选择setting->Version Control,新增或者编辑,选择目录,使用git或者svn管理 2、选择项目中的vcs.xml,打开选择要用的,注释掉不用的版本即可...
互联网家政小程序,为大众带来高效、便捷的服务
随着人口老龄化的严重和社会生活节奏的加快,大众对家政服务的需求日益增加,家政行业的市场规模逐渐扩大! 在科技的推动下,家政行业开始向数字化发展,“互联网家政”的模式推动了市场的快速发展。互联网家政小程序借助…...
【常用库】【pytorch】基本部件
基本元件 1. 卷积 2. batchnorm loss函数 torch.nn.MSELoss() >>> a torch.rand(3) >>> a tensor([0.2161, 0.2227, 0.9175]) >>> b torch.rand(3) >>> b tensor([0.6976, 0.9149, 0.4918]) >>> mse torch.nn.MSELOSS() &…...
深入Scrapy框架:掌握其工作流程
深入Scrapy框架:掌握其工作流程 引言 作为一名资深的Python程序员,我对各种数据采集工具有着深刻的理解。Scrapy,作为一个上场率极高的爬虫框架,以其高效、灵活和强大的特性,成为数据采集领域的不二选择。在本文中&a…...
从零开始学习机器学习,掌握AI未来的关键!
从零开始学习机器学习 1. 介绍1.1 人工智能(AI)概述1.2 机器学习在人工智能中的应用1.3 机器学习基础概念 2. 监督学习2.1 什么是监督学习2.2 回归分析2.3 分类问题2.4 模型评估和选择 3. 无监督学习3.1 什么是无监督学习3.2 聚类算法3.3 降维技术 4. 深…...
CI/CD(持续集成/持续部署)
CI/CD(持续集成/持续部署)是软件开发过程中的一种方法,旨在提高开发效率和软件质量。以下是对CI/CD的具体解释: 1.持续集成(Continuous Integration,CI): 概念:开发人员将代码频繁地合并到主分支中,每次提交都会触发自动化构建和测试过程。目的:及时发现和修复集成…...
实现字母的大小写转换。多组输入输出(c语言)
1.我们先输入字母(用getchar的函数),判断是不是字母,我们可以用a<tmp<z或者A<tmp<Z,注意:小写转换大写用tmp-32,大写转换小写用tmp32.. #include<stdio.h> int main() {int a 0;while …...
2024华为OD机试真题-最小矩阵宽度Python-C卷D卷-200分
2024华为OD机试题库-(C卷+D卷)-(JAVA、Python、C++) 题目描述 给定一个矩阵,包含 N * M 个整数,和一个包含 K 个整数的数组。 现在要求在这个矩阵中找一个宽度最小的子矩阵,要求子矩阵包含数组中所有的整数。 输入描述 第一行输入两个正整数 N,M,表示矩阵大小。 接下来 N …...
【Vue3】标签的 ref 属性
【Vue3】标签的 ref 属性 背景简介开发环境开发步骤及源码 背景 随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
