原生JS实现虚拟列表(不使用Vue,React等前端框架)
好家伙,
1. 什么是虚拟列表
虚拟列表（Virtual List）是一种优化长列表渲染性能的技术。当我们需要展示成千上万条数据时，如果一次性将所有数据渲染到DOM中，会导致页面卡顿甚至崩溃。虚拟列表的核心思想是：只渲染可视区域内的数据，而不是渲染所有数据
2. 使用场景
虚拟列表适用于以下场景：
- 大数据量展示：如聊天记录、新闻列表、商品列表等需要展示大量数据的场景
- 无限滚动：需要支持用户持续滚动加载更多内容的场景
- 性能敏感：在低性能设备上运行的应用，需要尽可能减少DOM操作
- 实时数据更新：频繁更新的数据列表，如股票行情、实时监控数据等
(我觉得实际场景中,分页会用到更多,用户要看的数据,永远只是一小部分,就那么几条,找不到就用搜索
但总要学学)
3. 虚拟列表原理
一句话:
要看了,再渲染
对,就这么简单,下面,进行分步
- 计算可视区域：确定用户当前可以看到的视口范围
- 计算可见项：根据视口位置、每项高度，计算出当前应该显示哪些数据项
- 渲染可见项：只渲染计算出的可见项到DOM中
- 位置偏移：通过CSS定位，确保可见项在正确的位置显示
- 监听滚动：当用户滚动时，重新计算可见项并更新DOM
这里几个难点:
我怎么知道哪些数据进入了可视区域?
答:监听滚动距离,滚到哪,就从哪里开始
4. 实现虚拟列表
Demo.html代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JavaScript虚拟列表实现</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} .list-container {
position: relative;
height: 400px;
overflow: auto;
border: 1px solid #ccc;
margin: 20px auto;
width: 80%;
} .list-phantom {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: -1;
} .list-content {
position: absolute;
left: 0;
right: 0;
top: 0;
overflow: hidden;
} .list-item {
padding: 10px;
border-bottom: 1px solid #eee;
color: #666;
} .list-item:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<h1 style="text-align: center; margin: 20px 0;">原生JavaScript虚拟列表</h1>
<div id="virtualList" class="list-container">
<div class="list-phantom"></div>
<div class="list-content"></div>
</div> <script>
class VirtualList {
constructor(options) {
this.container = options.container;
this.data = options.data || [];
this.itemHeight = options.itemHeight || 50;
this.bufferSize = options.bufferSize || 5; this.phantom = this.container.querySelector('.list-phantom');
this.content = this.container.querySelector('.list-content'); this.startIndex = 0;
this.endIndex = 0;
this.scrollTop = 0; this.init();
} init() {
// 设置占位容器的高度
this.phantom.style.height = this.data.length * this.itemHeight + 'px'; // 监听滚动事件
this.container.addEventListener('scroll', this.handleScroll.bind(this)); // 初始渲染
this.updateVisibleItems();
} handleScroll() {
// 获取当前滚动位置
this.scrollTop = this.container.scrollTop; // 更新可见项
this.updateVisibleItems();
} updateVisibleItems() {
// 计算开始和结束索引
this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
this.endIndex = this.startIndex + Math.ceil(this.container.clientHeight / this.itemHeight); // 添加缓冲区
this.startIndex = Math.max(0, this.startIndex - this.bufferSize);
this.endIndex = Math.min(this.data.length, this.endIndex + this.bufferSize); // 计算偏移量
const offsetY = this.startIndex * this.itemHeight; // 设置内容容器的偏移
this.content.style.transform = `translateY(${offsetY}px)`; // 渲染可见项
this.renderItems();
} renderItems() {
// 清空内容容器
this.content.innerHTML = ''; // 渲染可见项
for (let i = this.startIndex; i < this.endIndex; i++) {
const item = document.createElement('div');
item.className = 'list-item';
item.innerHTML = this.renderItemContent(this.data[i], i);
item.style.height = this.itemHeight + 'px';
this.content.appendChild(item);
}
} renderItemContent(item, index) {
return `<div>索引: ${index}, 内容: ${item}</div>`;
}
} // 生成测试数据
const data = Array.from({ length: 10000 }, (_, i) => `列表项 ${i + 1}`); // 初始化虚拟列表
const virtualList = new VirtualList({
container: document.getElementById('virtualList'),
data: data,
itemHeight: 50,
bufferSize: 10
});
</script>
</body>
</html>
5.最后总结
为什么滚动到指定位置后会将对应区域数据渲染?
1.监听滚动事件
2.滚动触发数据更新方法
3.根据滚动距离计算当前数据索引
4.根据可视区域计算要渲染数据项
5.渲染数据
6.定位内容
原生JS实现虚拟列表(不使用Vue,React等前端框架)的更多相关文章
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...
- 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- angular vue react web前端三大主流框架的对比
首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分 ...
- 原生js实现音乐列表（隔行换色、全选）
一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时 结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...
- vue项目使用前端框架开发，实现滑动效果，若不刷新页面则无法达到预期效果的问题及解决方法
滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到 ...
- 手把手教你使用VUE+SpringMVC+Spring+Mybatis+Maven构建属于你自己的电商系统之vue后台前端框架搭建——猿实战01
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是 ...
- 原生JS实现树状结构列表
树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...
- 导航栏中各按钮在点击当前按钮变色其他按钮恢复为原有色的实现方法（vue、jq、原生js）
一.vue如何实现? 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue实现实时监听文本框内容的变化（最后一种为原生js）
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- Qt编写安防视频监控系统59-子模块3图文警情
一.前言 图文警情子模块是为了适应现在各种人脸识别报警应用而增加的,参照现在各种视频监控手机app报警提示信息,基本上都是带了时间.内容.图片缩略图(单击可以查看大图),这种信息排列形式在现代的软件中 ...
- 如何使用图片的exif信息计算相机焦距
135胶卷源于35mm高度的打孔电影胶片,1913年,德国人奥斯卡·巴纳克将其用于他发明的徕卡(Leica)牌小型照相机上,由此形成标准.35mm电影胶卷,35mm指的是胶卷的高度为35mm,由于上下 ...
- Vue.js 监听属性的使用
示例源码: <div id = "computed_props"> 千米 : <input type = "text" v-model = & ...
- KMS for Windows 11
I. 镜像下载 Windows 镜像下载地址:站点1,站点2 II. 手动激活 参考文档:Easy ways to activate Windows 11 for FREE without a pro ...
- Python 进阶：深入理解 import 机制与 importlib 的妙用
大家好,今天我们来深入探讨 Python 中的导入机制和 importlib 模块.相信不少朋友和我一样,平时写代码时可能只用过最基础的 import 语句,或者偶尔用 importlib.impor ...
- Solution -「ZJOI 2018」「洛谷 P4338」历史
\(\mathscr{Description}\) Link. 给定一棵以 \(1\) 为根的树,点 \(u\) 有非负点权 \(a_u\). 定义 \(u\) 的一次染色的代价为:路径 ...
- uni-app发布体验版本后授权登录很卡
今天uni-app发布了一个体验版本, 但是我发现扫码登录后: 非常的卡顿在授权登录的时候: 但是在我的模拟器开发的时候, 是非常的流畅的. 没有一点儿的卡顿: 在真机上预览的时候也是非常的流畅的: ...
- 第4章 C#的高级特性
第4章 C#的高级特性 4.1 委托 4.1.2 多播委托 对值为 null 的委托变量进行 + 或 += 操作,等价于为变量指定一个新值: SomeDelegate d = null; d += ...
- Apache Camel系列(4)----Akka Camel
Akka是一个高性能,高容错的的分布式框架,并且对Camel也提供了很好的支持,下面创建一个Akka Camel的demo,运行环境:CentOS7 + IntelliJ + JDK8.这个demo分 ...
- 问一下，利用在线 DeepSeek 等 API 服务实现一个答题 APP
简介 这是一个利用 Android 无障碍功能 + 悬浮窗 + 大模型的搜题应用 原理就是利用无障碍读取屏幕内容,然后通过悬浮窗来显示答案 众所周知我是一个学渣,所以在搜答案方面颇有成就 大概是在 4 ...