当前位置: 首页 > news >正文

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组件各种功能的实现。在数据量很大的情况下&#xff0c;我们讲了两种实现方式来提高渲染性能&#xff1a;前端分页和节点数据懒加载。 前端分页小节&#xff1a;Vue3扁平化Tree组件的前端分页实现 节点数据懒加载小节&#xff1a;Element Tree Plu…...

昇思25天学习打卡营第1天|快速入门

目录 昇思MindSpore介绍MindSpore的API来快速实现一个简单的深度学习模型通过资料更深入的了解昇思MindSpore 昇思MindSpore介绍 今天有幸学习了昇思MindSpore&#xff0c;让我们来简单的了解一下它 昇思MindSpore是一个全场景深度学习框架&#xff0c;旨在实现易开发、高效执行…...

LinkedList 实现 LRU 缓存

LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;缓存是一种缓存淘汰策略&#xff0c;用于在缓存满时淘汰最久未使用的元素。 关键&#xff1a; 缓存选什么结构&#xff1f; 怎么实现访问顺序&#xff1f; import java.util.*;public class LRUCac…...

ubuntu安装workon

pip install virtualenvpip install virtualenvwrapper配置virtualenvwrapper。在你的shell配置文件&#xff08;比如.bashrc&#xff0c;.bash_profile或.zshrc&#xff09;中添加以下内容&#xff1a;export WORKON_HOME$HOME/.virtualenvs export VIRTUALENVWRAPPER_PYTHON/…...

(面试必看!)锁策略

文章导读 引言考点一、重量级锁 VS 轻量级锁1、定义与原理2、主要区别3、适用场景 考点二、乐观锁 VS 悲观锁1、悲观锁&#xff08;Pessimistic Locking&#xff09;2、乐观锁&#xff08;Optimistic Locking&#xff09;3、总结 考点三、读写锁1、读写锁的特性2、读写锁的实现…...

RAGflow:开源AI框架的创新与应用

在当今科技飞速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经成为各行各业不可或缺的一部分。特别是在文档处理和数据分析领域&#xff0c;AI的应用更是无处不在。今天&#xff0c;我要向大家介绍一个开源的AI框架引擎——RAGflow。它能够在深度文档理解方面执…...

AI的学习明确路径

1.不要一开始学习数学。 首先&#xff0c;学习python的语法和工具包。 python的工具包有&#xff1a;numpy,pandas,matlap,sciklt-learn. 然后&#xff0c;学习机械学习算法&#xff0c;学习1.树模型&#xff0c;随机森林 。 2.神经网络。 上kaggle中&#xff0c;找人家的经…...

【C++】巧用缺省参数与函数重载:提升编程效率的秘密武器

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间 本章将分享缺省参数与函数重载相关知识&#xff0c;为了更加深入学习C打下了坚实的基础。本章重点在于缺省参数与函数重载使用前提与注意事项 &#x1f308;个人主页&#xff1a;是店小二呀 &#x1…...

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&#xff0c;以CentOS/RHEL为例&#xff0c;其他操作系统请参考docker官方安装方法 # 如果已经安装过docker 期望重装&#xff0c;先卸载 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \d…...

B端:导航条就框架提供的默认样式吗?非也,看过来。

导航条不一定必须使用框架提供的默认样式&#xff0c;你可以根据项目需求和设计风格进行自定义。通过使用框架提供的自定义选项、CSS样式覆盖、自行设计或者使用其他UI库或组件&#xff0c;你可以实现独特且符合需求的导航条样式。 下面发一些参考给友友们&#xff0c;可以让设…...

idea的git与SVN切换

1、选择setting->Version Control&#xff0c;新增或者编辑&#xff0c;选择目录&#xff0c;使用git或者svn管理 2、选择项目中的vcs.xml,打开选择要用的&#xff0c;注释掉不用的版本即可...

互联网家政小程序,为大众带来高效、便捷的服务

随着人口老龄化的严重和社会生活节奏的加快&#xff0c;大众对家政服务的需求日益增加&#xff0c;家政行业的市场规模逐渐扩大&#xff01; 在科技的推动下&#xff0c;家政行业开始向数字化发展&#xff0c;“互联网家政”的模式推动了市场的快速发展。互联网家政小程序借助…...

【常用库】【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框架&#xff1a;掌握其工作流程 引言 作为一名资深的Python程序员&#xff0c;我对各种数据采集工具有着深刻的理解。Scrapy&#xff0c;作为一个上场率极高的爬虫框架&#xff0c;以其高效、灵活和强大的特性&#xff0c;成为数据采集领域的不二选择。在本文中&a…...

从零开始学习机器学习,掌握AI未来的关键!

从零开始学习机器学习 1. 介绍1.1 人工智能&#xff08;AI&#xff09;概述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.我们先输入字母&#xff08;用getchar的函数&#xff09;&#xff0c;判断是不是字母&#xff0c;我们可以用a<tmp<z或者A<tmp<Z,注意&#xff1a;小写转换大写用tmp-32&#xff0c;大写转换小写用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 属性 背景简介开发环境开发步骤及源码 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努力学习奋斗的日子。…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...