从0开始写一个虚拟滚动组件_虚拟滚动原理

myzbx 2025-09-18 23:47 59 浏览

如果一个页面有1W+条数据，该怎么渲染比较好。不管是在我们的实际项目开发中还是在面试的过程中都会遇到类似的问题。相信很多同学会想到分页。当然这也是最传统也是最保底的解决方案了。

如果有开发过electron相关的项目，很多数据都会存储在本地sqlite数据库中，有些列表需要一次性渲染出来，无法使用使用分页方案。因此虚拟滚动技术是一个特别合适的解决方案。

虚拟滚动本身就是技术的一个简单的应用，并没有什么高深的逻辑

虚拟滚动的基本原理

基本原理就是我们只渲染一个长列表的中间在可视区部分的数据，其它的数据不参与渲染。

是不是感觉很抽象？其实网上已经有各路大神给出他们的实现思路。slice截取数组得到我们要渲染的真实的节点数据。顶部和底部分别用padding撑开。在列表的滚动的过程中不断地计算截取数据的位置即可。

我的思路

数据的每一项dom节点都采用绝对定位脱离文档流，然后通过定位的方式计算每一个节点的位置。最后也是通过滚动的距离计算出偏移量，再拿v-if进行判断渲染与否。先来看效果

再来看下基本的dom结构，一目了然。所有脱离文档流的节点的父级需要计算高度，撑起列表的滚动条。

接下来最核心的问题就是要在handleScroll方法中计算start偏移量了。可能大家觉得这一步很简单了。

handleScroll(e){
    const { scrollTop } = e.target;
    this.start = scrollTop / 50; //50是列表每一项的高度
}

完美，搞定。

基本到这，基本功能完成。

but

有问题，稍微对代码比较敏感的开发者看到这里，都会疑惑，我们做虚拟滚动，本身就是在做性能优化。这里不能优化一下么？

问题是什么

scroll事件触发频率是非常频繁的。不停地去计算start值，实际浪费了很多无效的CPU资源，那问题又来了，什么时候需要去计算start呢？可能大家会想到用节流，但是很遗憾，这里不适合用。

为什么呢？

因为列表滚动是用户的一个主动行为。用户有可能快速拉动滚动条，快速滚屏操作。我们计算start的频率也应该越高。不然列表的顶部或者底部会出现白底。

优化思路仅是我个人对于组件的思考，如果有更好的方案欢迎大家评论区补充。

用户在滚动列表的过程中，我会时判断滚动条的滚动方向。无非两种情况：

滚动条向下。这时候，我会去获取到列表最后一项的dom节点。判断这个节点距离底部的距离，如果距离小于一个固定值时，开始计算start的值。
滚动条向上。同理。这时候，我会去获取到列表第一项的dom节点。判断第一个节点距离顶部的距离。如果大于一个固定值时，开始计算start值。

此时问题又来了：怎么判断滚动条的滚动方向呢？

这里稍等有一些经验的同学应该很容易想到，维护一个上一次的scrollTop值。两个次的差值如果大于0则滚动条向上，反之则反。

核心代码：

以上就是我针对虚拟滚动技术的理解以及实践，各路大神如果有更好的方案欢迎同我交流。

注：此技术已经应用在我的真实的项目开发中。

可能有人问我为什么不用第三方框虚拟组件呢？

因为我们具体的真实项目中，可能存在各种变化，无力去熟悉第三方组件的源码，也不一定全能吃透。而我们自己研发的组件，源代码熟悉，扩展起来也是很方便。

写在最后

关于技术，希望大家有自己的思考。此组件我只公开了部分的源码。大家可以根据实际需求自行DIY，武装自己。

有什么问题可以随时在评论区交流哦。

DOM 节点列表

上一篇：25个每个开发人员都应该掌握的JavaScript 数组方法
下一篇：React系列十 - 高阶组件以及组件补充

从0开始写一个虚拟滚动组件_虚拟滚动原理

虚拟滚动的基本原理

我的思路

问题是什么

写在最后

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿