JS数组实现虚拟滚动技巧分享
时间:2025-08-02 09:37:48 241浏览 收藏
最近发现不少小伙伴都对文章很感兴趣,所以今天继续给大家介绍文章相关的知识,本文《JS数组实现虚拟滚动方法解析》主要内容涉及到等等知识点,希望能帮到你!当然如果阅读本文时存在不同想法,可以在评论中表达,但是请勿使用过激的措辞~
虚拟滚动通过只渲染可视区域内的数据来提升性能,其核心是根据滚动位置动态计算需渲染的数据范围。1. 计算可视区域数据范围:基于scrollTop、itemHeight和visibleHeight,得出startIndex = Math.floor(scrollTop / itemHeight),endIndex = Math.min(startIndex + Math.ceil(visibleHeight / itemHeight), data.length)。2. 处理滚动条高度:设置容器高度为totalHeight = data.length * itemHeight,以模拟完整列表的滚动高度。3. 优化滚动性能:使用节流函数throttle限制滚动事件触发频率,如throttledScrollHandler = throttle(handleScroll, 50)。4. 处理不同高度数据项:维护itemHeights和cumulativeHeights数组,通过二分查找findStartIndex确定起始索引,并累加高度计算endIndex。5. 处理占位元素:通过绝对定位或外层容器的高度占位,确保滚动条正常显示。6. React中实现:使用useState管理startIndex,useRef绑定容器,监听scroll事件更新渲染范围,结合absolute定位渲染可视项,并设置总高度保持滚动条比例,最终实现高效虚拟滚动。
JavaScript数组实现虚拟滚动,本质上是只渲染可视区域内的数据,而非全部数据,从而提高性能。核心在于根据滚动位置动态计算需要渲染的数据范围。

解决方案
虚拟滚动主要通过监听滚动事件,计算可视区域内的起始索引和结束索引,然后从完整的数据集中截取相应的数据进行渲染。这个过程需要精确计算,并且要考虑到滚动条的高度和数据项的高度。

如何计算可视区域的数据范围?
首先,你需要知道每个数据项的高度(假设所有项高度一致),以及可视区域的高度。然后,根据滚动条的scrollTop值,就可以计算出可视区域的起始索引。

const itemHeight = 30; // 每个数据项的高度 const visibleHeight = 600; // 可视区域的高度 const scrollTop = // 获取滚动条的scrollTop值 const startIndex = Math.floor(scrollTop / itemHeight); const endIndex = Math.min(startIndex + Math.ceil(visibleHeight / itemHeight), data.length); //data是你的完整数据
计算出startIndex和endIndex后,就可以使用data.slice(startIndex, endIndex)
来获取需要渲染的数据。
如何处理滚动条的高度?
虚拟滚动需要模拟一个完整的滚动条,即使只渲染了部分数据。这通常通过设置容器的高度来实现,容器的高度等于数据总数乘以每个数据项的高度。
const totalHeight = data.length * itemHeight; // 设置容器的style.height = totalHeight + 'px';
如何优化滚动性能?
频繁的滚动事件触发会导致大量的计算和渲染,影响性能。可以使用节流或防抖技术来优化滚动事件的处理。
function throttle(func, delay) { let timeoutId; let lastExecTime = 0; return function(...args) { const context = this; const currentTime = new Date().getTime(); if (!timeoutId) { if (currentTime - lastExecTime >= delay) { func.apply(context, args); lastExecTime = currentTime; } else { timeoutId = setTimeout(() => { func.apply(context, args); lastExecTime = new Date().getTime(); timeoutId = null; }, delay - (currentTime - lastExecTime)); } } }; } const throttledScrollHandler = throttle(handleScroll, 50); // 50ms节流 // 监听滚动事件,调用throttledScrollHandler
如何处理不同高度的数据项?
如果数据项的高度不一致,需要维护一个高度缓存,记录每个数据项的高度。在计算可视区域的数据范围时,需要遍历高度缓存,累加高度,直到达到scrollTop值。 这会增加计算的复杂度,但能更精确地实现虚拟滚动。
const itemHeights = []; // 存储每个数据项的高度 let cumulativeHeights = [0]; // 存储累计高度,第一个元素为0 function calculateCumulativeHeights() { let sum = 0; for (let i = 0; i < data.length; i++) { // 假设你可以获取到每个data[i]元素渲染后的高度,比如通过 getBoundingClientRect() const element = document.getElementById(`item-${i}`); // 假设每个item有唯一的id if(element){ itemHeights[i] = element.getBoundingClientRect().height; } else { itemHeights[i] = itemHeight; // 默认高度,或者在渲染后更新 } sum += itemHeights[i]; cumulativeHeights[i + 1] = sum; } } // 找到startIndex:二分查找cumulativeHeights中第一个大于等于scrollTop的索引 function findStartIndex(scrollTop) { let low = 0; let high = cumulativeHeights.length - 1; let bestIndex = high; // 默认值 while (low <= high) { const mid = Math.floor((low + high) / 2); if (cumulativeHeights[mid] >= scrollTop) { bestIndex = mid; high = mid - 1; } else { low = mid + 1; } } return Math.max(0, bestIndex - 1); // 确保不小于0 } // 计算endIndex:找到startIndex后,累加高度直到超出visibleHeight function calculateEndIndex(startIndex, visibleHeight) { let sum = 0; let endIndex = startIndex; for (let i = startIndex; i < data.length; i++) { sum += itemHeights[i]; if (sum > visibleHeight) { endIndex = i; break; } endIndex = i; } return Math.min(endIndex + 1, data.length); } // 滚动处理函数 function handleScroll() { const scrollTop = // 获取滚动条的scrollTop值 const startIndex = findStartIndex(scrollTop); const endIndex = calculateEndIndex(startIndex, visibleHeight); const visibleData = data.slice(startIndex, endIndex); // 渲染visibleData } // 初始化时计算累计高度 calculateCumulativeHeights();
如何处理占位元素?
为了保证滚动条的正确显示,通常需要在可视区域的上方和下方添加占位元素,用于填充未渲染的数据项。占位元素的高度等于未渲染的数据项的高度之和。
虚拟滚动在React中的实现?
在React中,可以使用react-window
或react-virtualized
等库来实现虚拟滚动。这些库提供了高性能的虚拟滚动组件,可以简化虚拟滚动的实现。当然,你也可以自己实现,通过state管理startIndex和endIndex,并在滚动事件中更新state。
import React, { useState, useRef, useEffect } from 'react'; const VirtualizedList = ({ data, itemHeight }) => { const [startIndex, setStartIndex] = useState(0); const containerRef = useRef(null); const visibleCount = 20; // 可视区域容纳的item数量,可以动态计算 const handleScroll = () => { if (!containerRef.current) return; const scrollTop = containerRef.current.scrollTop; const newStartIndex = Math.floor(scrollTop / itemHeight); setStartIndex(newStartIndex); }; useEffect(() => { if (containerRef.current) { containerRef.current.addEventListener('scroll', handleScroll); } return () => { if (containerRef.current) { containerRef.current.removeEventListener('scroll', handleScroll); } }; }, []); const visibleData = data.slice(startIndex, Math.min(startIndex + visibleCount, data.length)); const totalHeight = data.length * itemHeight; return (); }; export default VirtualizedList;{visibleData.map((item, index) => ({item}))}
这段代码展示了React中虚拟滚动的一个基本实现,关键点在于根据滚动位置动态计算startIndex
,并只渲染visibleData
。totalHeight
用于模拟完整滚动条,position: absolute
和top
用于定位每个渲染的item。
本篇关于《JS数组实现虚拟滚动技巧分享》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
304 收藏
-
295 收藏
-
204 收藏
-
386 收藏
-
489 收藏
-
449 收藏
-
263 收藏
-
472 收藏
-
410 收藏
-
223 收藏
-
400 收藏
-
428 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习