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

用原生JS实现虚拟列表(IT枫斗者)

news 2026/2/9 13:10:42

用原生JS实现虚拟列表

介绍

  • 最近在开发需求的时候，有用到 Antd 的虚拟列表组件 rc-virtual-list ，粗略地看了一下源码，于是萌生了自己写一个虚拟列表的想法。
  • 当一个列表需要渲染大量数据的时候是非常耗时的，而且在列表滚动的过程中会出现卡顿的现象。即使用上懒加载解决了列表初始化时渲染过慢的问题，但是每次拉取下一页数据的时候都会造成列表的重新渲染。随着拉取的数据越来越多，列表渲染时间长、卡顿的问题依然存在。
  • 这个时候虚拟列表就派上用场了。虚拟列表的实现原理简单来说，就是列表并不会把所有的数据都渲染出来，而是通过监听滚动事件然后实时计算当前是哪几条数据显示在页面上，然后只渲染用户可以看见的这几条数据。
  • 在网上找了张图可以说明的更生动些：
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vbz6hBM5-1684195418798)(C:\Users\quyanliang\AppData\Roaming\Typora\typora-user-images\1684195219996.png)]

定高虚拟列表

  • 实现虚拟列表需要两层的div：

  • <style>.list-container {overflow: auto;border: 1px solid black;height: 500px;}
</style><body><!-- 外部容器用来固定列表容器的高度，同时生成滚动条 --><div class="list-container"><!-- 内部容器用来装元素，高度是所有元素高度的和 --><div class="list-container-inner"></div></div>Ï
</body>

  • 外层的div用来固定高度，也就是图上展示的B区域。内层的div用来装列表元素，也就是图上展示的A区域。给外层的div设置 overflow: auto ，这样当列表元素数量超过B区域的高度时就会出现滚动条。

  • 接下来，我们需要监听外层div的滚动事件，实时计算出显示在可视区域上的第一个元素的坐标 startIndex 和 最后一个元素的坐标 endIndex。假设列表每个元素的高度都是60px，那么 startIndex 就等于外层 div 顶部卷起来的长度除以列表元素的高度，而 endIndex 就等于 startIndex + 可视区域能展示的元素个数 ：

  • const itemHeight = 60
const height = 500
const startIndex = Math.floor(outerContainer.scrollTop / itemHeight)
const endIndex = startIndex + Math.ceil(height / itemHeight)

  • 然后用 startIndex 和 endIndex 去截取数据，并渲染在内层 div 上：

  • const viewData = data.slice(startIndex, endIndex + 1)
const innerContainer = document.querySelector('.list-container-inner')
innerContainer.innerHTML = ''
for(let i = 0; i < viewData.length; i++) {const item = document.createElement('div')item.innerHTML = viewData[i]innerContainer.appendChild(item)
}

  • 最后一步，虽然我们只需要渲染在可视区域上的元素，但是我们还需要给内层的 div 设置 padding-top 和 padding-bottom ，替代那些不需要渲染的元素。由此保证虚拟列表是可以滚动的，而且滚动条位置和列表元素位置是相对应的。 padding-top 等于 startIndex 之前的元素高度和， padding-bottom 等于 endIndex 之后的元素高度和：

  • const paddingTop = startIndex * itemHeight
const paddingBottom = (data.length - endIndex) * itemHeight
innerContainer.setAttribute('style', `padding-top: ${paddingTop}px; padding-bottom: ${paddingBottom}px`)

  • 完整代码：

  • <style>.list-container {overflow: auto;border: 1px solid black;height: 500px;}
</style><body><!-- 外部容器用来固定列表容器的高度，同时生成滚动条 --><div class="list-container"><!-- 内部容器用来装元素，高度是所有元素高度的和 --><div class="list-container-inner"></div></div><script>/** --------- 一些基本变量 -------- */const itemHeight = 60const height = 500/** --------- 生成数据 -------- */const initData = () => {const data = []for(let i = 0; i < 15; i++) {data.push({content: `内容:${i}`, height: itemHeight, color: i % 2 ? 'red' : 'yellow'})}return data}const data = initData()const contentHeight = itemHeight * data.lengthconst outerContainer = document.querySelector('.list-container')const scrollCallback = () => {// 获取当前要渲染的元素的坐标const scrollTop = Math.max(outerContainer.scrollTop, 0)const startIndex = Math.floor(scrollTop / itemHeight)const endIndex = startIndex + Math.ceil(height / itemHeight)const innerContainer = document.querySelector('.list-container-inner')// 从data取出要渲染的元素并渲染到容器中const viewData = data.slice(startIndex, endIndex + 1)innerContainer.innerHTML = ''for(let i = 0; i < viewData.length; i++) {const item = document.createElement('div')const itemData = viewData[i]item.innerHTML = itemData.contentitem.setAttribute('style', `height: ${itemData.height}px; background: ${itemData.color}`)innerContainer.appendChild(item)}// 未渲染的元素由padding-top和padding-bottom代替，保证滚动条位置正确const paddingTop = startIndex * itemHeightconst paddingBottom = (data.length - endIndex) * itemHeightinnerContainer.setAttribute('style', `padding-top: ${paddingTop}px; padding-bottom: ${paddingBottom}px`)}// 首屏渲染scrollCallback()// 监听外部容器的滚动事件outerContainer.addEventListener('scroll', scrollCallback)</script>
</body>

不定高虚拟列表

  • 上面实现的是元素高度固定的虚拟列表，对于元素高度不固定的情况，虚拟列表实现起来会更复杂一些。

  • 因为我们事先不知道元素的高度，所以在监听滚动事件的过程中，需要遍历一遍列表获取每个元素的高度，由此算出 startIndex 、 endIndex 等数据。不过在第一次渲染之前，因为元素没有渲染出来，我们拿不到元素的真实高度。所以这时候需要给元素一个最小高度 itemHeight ，通过 itemHeight 来计算 startIndex 和 endIndex，由此保证第一次渲染出来的元素能占满整个可视区域。

  • 另外，当元素渲染出来以后，我们用一个字典去记录每个元素的真实高度，供下次滚动事件触发时 startIndex 和 endIndex 的计算。

  • startIndex 的算法是在遍历列表元素的过程中，逐步累加当前元素的高度得到 contentHeight ，当第一次出现 contentHeight 大于容器顶部卷起来的长度的时候，说明当前元素是列表可视区域的第一个元素，记为 startIndex。

  • endIndex 的算法是当第一次出现 contentHeight 大于 容器顶部卷起来的长度 + 容器高度 的时候，说明当前元素是列表可视区域的最后一个元素，记为 endIndex 。

  • 完整代码：

  • <style>.list-container {overflow: auto;border: 1px solid black;height: 500px;}
</style><body><!-- 外部容器用来固定列表容器的高度，同时生成滚动条 --><div class="list-container"><!-- 内部容器用来装元素，高度是所有元素高度的和 --><div class="list-container-inner"></div></div><script>/** --------- 一些基本变量 -------- */const itemHeight = 60const height = 500/** --------- 生成数据 -------- */const getRandomHeight = () => {// 返回 [60, 150] 之间的随机数return Math.floor(Math.random() * (150 - itemHeight + 1) + itemHeight)}const initData = () => {const data = []for(let i = 0; i < 15; i++) {data.push({content: `内容:${i}`, height: getRandomHeight(), color: i % 2 ? 'red' : 'yellow'})}return data}const data = initData()const cacheHeightMap = {}const outerContainer = document.querySelector('.list-container')const scrollCallback = () => {let contentHeight = 0let paddingTop = 0let upperHeight = 0let startIndexlet endIndexconst innerContainer = document.querySelector('.list-container-inner')const scrollTop = Math.max(outerContainer.scrollTop, 0)// 遍历所有的元素，获取当前元素的高度、列表总高度、startIndex、endIndexfor(let i = 0; i < data.length; i++) {// 初始化的时候因为元素还没有渲染，无法获取元素的高度// 所以用元素的最小高度itemHeight来进行计算，保证渲染的元素个数能占满列表const cacheHeight = cacheHeightMap[i]const usedHeight = cacheHeight === undefined ? itemHeight : cacheHeightcontentHeight += usedHeightif (contentHeight >= scrollTop && startIndex === undefined) {startIndex = ipaddingTop = contentHeight - usedHeight}if (contentHeight > scrollTop + height && endIndex === undefined) {endIndex = iupperHeight = contentHeight}}// 应对列表所有元素没有占满整个容器的情况if (endIndex === undefined) {endIndex = data.length - 1upperHeight = contentHeight}// 未渲染的元素的高度由padding-top和padding-bottom代替，保证滚动条位置正确// 这里如果把设置pading的操作放在渲染元素之后，部分浏览器滚动到最后一个元素时会有问题const paddingBottom = contentHeight - upperHeightinnerContainer.setAttribute('style', `padding-top: ${paddingTop}px; padding-bottom: ${paddingBottom}px`)// 从data取出要渲染的元素并渲染到容器中const viewData = data.slice(startIndex, endIndex + 1)innerContainer.innerHTML = ''const fragment = document.createDocumentFragment()for(let i = 0; i < viewData.length; i++) {const item = document.createElement('div')const itemData = viewData[i]item.innerHTML = itemData.contentitem.setAttribute('style', `height: ${itemData.height}px; background: ${itemData.color}`)fragment.appendChild(item)}innerContainer.appendChild(fragment)// 存储已经渲染出来的元素的高度，供后面使用const children = innerContainer.childrenlet flag = startIndexfor(const child of children) {cacheHeightMap[flag] = child.offsetHeightflag++}}// 首屏渲染scrollCallback()// 监听外部容器的滚动事件outerContainer.addEventListener('scroll', scrollCallback)</script>
</body>

  • 在这里插入图片描述

相关文章：

用原生JS实现虚拟列表(IT枫斗者)

用原生JS实现虚拟列表 介绍 最近在开发需求的时候&#xff0c;有用到 Antd 的虚拟列表组件 rc-virtual-list &#xff0c;粗略地看了一下源码&#xff0c;于是萌生了自己写一个虚拟列表的想法。当一个列表需要渲染大量数据的时候是非常耗时的&#xff0c;而且在列表滚动的过程…...

编程日记 2023/5/25 14:01:52

FAT NTFS Ext3文件系统有什么区别

10 年前 FAT 文件系统还是常见的格式&#xff0c;而现在 Windows 上主要是 NTFS&#xff0c;Linux 上主要是Ext3、Ext4 文件系统。关于这块知识&#xff0c;一般资料只会从支持的磁盘大小、数据保护、文件名等各种维度帮你比较&#xff0c;但是最本质的内容却被一笔带过。它们最…...

编程日记 2023/5/31 18:40:03

信息收集思路

1、开发者注释 在网站前端代码中遗留的开发者注释 其中可能包含某些关键信息 ​ &#x1f4a1; 使用F12 、CtrlU 、view-source: 查看前端源码 ​ 3、Robots文件 爬虫协议&#xff0c;网站根目录存在的robots.txt文件&#xff0c;用于告知搜索引擎或爬虫哪些路径和页面不…...

编程日记 2023/5/31 22:30:24

Tauri应用开发（二）：创建第一个Tauri应用

创建tauri应用 推荐参考官方文档&#xff1a;https://tauri.app/v1/guides/ 创建命令&#xff1a; npm create tauri-applatest&#x1f4a1;注意&#xff1a;请确保Node.js和Rust已经正确安装 在创建过程中&#xff0c;需要根据提示选择配置项。 主要配置有&#xff1a; 项目…...

编程日记 2023/5/30 19:45:32

自信裸辞：一晃 ，失业都3个月了.....

最近&#xff0c;找了很多软测行业的朋友聊天、吃饭 &#xff0c;了解了一些很意外的现状 。 我一直觉得他们技术非常不错&#xff0c;也走的测开/管理的路径&#xff1b;二三月份裸辞的&#xff0c;然后一直在找工作&#xff0c;现在还没找到工作 。 经过我的分析&#xff0…...

编程日记 2023/5/25 13:41:43

Python3 输入和输出

在Python 3中&#xff0c;你可以使用内置的函数来进行输入和输出操作。 输入&#xff08;Input&#xff09;&#xff1a; 要从用户那里获取输入&#xff0c;可以使用input()函数。input()函数会等待用户输入&#xff0c;并返回一个字符串。你可以将输入存储在一个变量中&#…...

编程日记 2023/5/25 13:36:42

Mybatis Plus 使用@TableLogic实现逻辑删除

文章目录 步骤1:修改数据库表添加deleted列步骤2:实体类添加属性步骤3:运行删除方法知识点1&#xff1a;TableLogic 接下来要讲解是删除中比较重要的一个操作&#xff0c;逻辑删除&#xff0c;先来分析下问题: 这是一个员工和其所签的合同表&#xff0c;关系是一个员工可以签多…...

编程日记 2023/5/30 19:20:00

2023/5/23总结

super关键字 super关键字的用法和this 关键字的用法相似 this:代表本类对象的引用&#xff08;this关键字指向调用该方法的对象一般我们是在当前类中使用this关键字&#xff0c;所以我们常说this代表本类对象的引用&#xff09;super:代表父类存储空间的标识(可以理解为父类对象…...

编程日记 2023/5/25 13:26:38

Squid代理服务器应用

在web架构中&#xff0c;用户一般进入负载均衡层&#xff0c;通过调度来访问web应用层&#xff0c;但是如果访问量太大&#xff0c;并发量较高&#xff0c;web应用层会吃不消&#xff0c;我们把静态资源、经常要访问的资源放入缓存&#xff0c;用户直接访问缓存层&#xff0c;加…...

编程日记 2023/5/25 13:21:37

网络编程中的sockfd是什么？

2023年5月22日&#xff0c;周一早上&#xff1a; 今天早上学习网络编程时遇到了sockfd这个变量&#xff0c;于是学习了一下&#xff0c;顺便写篇博客来记录自己的学习成功。 sockfd是什么意思&#xff1f; "sock"是socket的缩写。"fd"则是file descripto…...

编程日记 2023/5/25 13:16:36

如何利用Citespace和vosviewer既快又好地写出高质量的论文及快速锁定热点和重点文献进行可视化分析？

基于Citespace和vosviewer文献计量学可视化SCI论文高效写作方法 CiteSpace是什么&#xff1f; 简单来说&#xff0c;它一款通过将国内外文献进行可视化分析来帮助你了解一门学科前世今生的软件。 面对成千上万篇的文献&#xff0c;怎样才能快速锁定自己最感兴趣的主题及科学…...

编程日记 2023/5/30 13:29:43

（学习日记）AD学习 #1

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…...

编程日记 2023/5/25 13:06:33

缓存存在的问题

文章目录 缓存问题缓存穿透引入解决方案 缓存雪崩缓存击穿 缓存问题 使用缓存时常见的问题主要分为三个&#xff1a;缓存穿透 、缓存雪崩、缓存击穿。 下面对其进行一一学习 缓存穿透 引入 定义&#xff1a;缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#…...

编程日记 2023/5/25 13:01:32

ChatGPT 的 AskYourPDF 插件所需链接如何获取？

一、背景 目前 ChatGPT 主要有两款 PDF 对话插件&#xff0c;一个是 AskYourPDF 一个是 ChatWithPDF&#xff08;需 ChatGPT Plus&#xff09;&#xff0c;他们都可以实现给一个公共的PDF 链接&#xff0c;然后进行持续对话&#xff0c;对读论文&#xff0c;阅读 PDF 格式的文…...

编程日记 2023/5/31 22:32:37

基于自营配送模式的车辆路径规划设计与实现_kaic

摘要 近年来&#xff0c;随着我国消费水平逐渐提升&#xff0c;消费者在网上购物的频率也越来越高&#xff0c;电商发展速度迅猛&#xff0c;加大了物流配送的压力&#xff0c;促使物流企业以更大的运力&#xff0c;更短的时间将货物送达。在货品的运输过程中&#xff0c;成本居…...

编程日记 2023/5/25 12:51:28

动态规划-树形DP

树的重心 题目 链接&#xff1a;https://www.acwing.com/problem/content/848/ 给定一颗树&#xff0c;树中包含 n n n 个结点&#xff08;编号 1 ∼ n 1 \sim n 1∼n&#xff09;和 n − 1 n-1 n−1 条无向边。 请你找到树的重心&#xff0c;并输出将重心删除后&#x…...

编程日记 2023/5/30 13:46:12

多线程基础（二）CAS无锁优化/自旋锁/乐观锁、ABA问题

CAS &#xff08;Compare And Set&#xff09;比较并替换 上篇文章的锁问题解决&#xff0c;可以使用更高效的方法&#xff0c;使用AtomXXX类&#xff0c;AtomXXX类本身方法都是原子性的&#xff0c;但不能保证多个方法连续调用是原于性的。 import java.util.ArrayList; imp…...

编程日记 2023/5/25 12:41:24

记ABAC的落地实践

为什么使用ABAC 一般提到授权&#xff0c;我们就会想到角色&#xff08;role&#xff09;。什么样的用户拥有什么样的角色可以怎么操作什么样的资源&#xff0c;这是我们普遍使用的权限系统的模型。这里的角色实质上是包含了一组用户操作资源的规则集合。一旦角色被创建&#…...

编程日记 2023/5/25 12:36:23

【C++】C++11线程库 和 C++IO流

春风若有怜花意&#xff0c;可否许我再少年。 文章目录 一、C11线程库1.thread类介绍2.mutex互斥锁 和 CAS原子操作&#xff08;compare and set&#xff09;3.lock_guard和unique_lock4.两个线程交替打印&#xff0c;一个打印奇数&#xff0c;一个打印偶数&#xff08;线程同步…...

编程日记 2023/5/25 12:31:20

cpp11实现线程池(六)——线程池任务返回值类型Result实现

介绍 提交任务函数submitTask中返回的Result类型应该是用Result类包装当前的task&#xff0c;因为出函数之后task即如下形式&#xff1a;return Result(task); Result和Task都要互相持有对方的指针&#xff0c;Task要将任务执行结果通过Result::setVal(run()) 调用传给其对应…...

编程日记 2023/6/1 9:04:06

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/30 10:30:15

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2026/1/27 19:28:11

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2026/2/4 12:52:32

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/2/8 5:28:24

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2026/2/4 19:50:05

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

编程新知 2025/11/29 18:42:46

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2026/2/7 1:08:45