原生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编写的项目作品7-视频监控系统
一.功能特点 (一)软件模块 视频监控模块,各种停靠小窗体子模块,包括设备列表.图文警情.窗口信息.云台控制.预置位.巡航设置.设备控制.悬浮地图.网页浏览等. 视频回放模块,包括本地回放.远程回放. ...
- 百度高效研发实战训练营-Step1
百度高效研发实战训练营-Step1 1 设计方法与实践介绍 1.1. 软件设计原则 (1)软件设计的目的 软件设计是为了使软件在长期范围内能够容易的进行变化. 变化:软件不是一成不变的,无论是软件本身 ...
- 记录一下关于谷歌浏览器的开发者插件之vue-devtools
在做vue进行开发的时候增加一个浏览器的插件进行开发可以做到游鱼得水,更加的舒适 在这里我留下一个git地址用来下载插件包 https://gitee.com/zhang_banglong/vue-d ...
- 最新AI智能体开发案例：辅助写作神器！教你用Coze平台搭建「文匠智创 1.0」智能体！
各位小伙伴们,大家好呀!我是疯狂老包.我精心打造的<疯狂AI智能体开发:100个实战案例, 从 入门到精通 >正在开发中!要是你对 AI 应用搭建满怀热忱,渴望深入学习其中的奥秘与技巧,那 ...
- 单点登录-CAS原理
1.首先了解几个概念 1).TGC:Ticket-granting cookie,存放用户身份认证凭证的cookie,在浏览器和CAS Server间通讯时使用.2).TGT:ticket grant ...
- 并发编程之 ConcurrentLinkedQueue 源码
文章目录1 ConcurrentLinkedQueue的概述2 ConcurrentLinkedQueue的实现2.1 基本结构2.2 构造器2.2.1 ConcurrentLinkedQueue2. ...
- 时间序列数据库TSDB InfluxDB介绍
背景 这两年互联网行业掀着一股新风,总是听着各种高大上的新名词.大数据.人工智能.物联网.机器学习.商业智能.智能预警啊等等. 以前的系统,做数据可视化,信息管理,流程控制.现在业务已经不仅仅满足于这 ...
- PDCA使用指南详解（史上最强）
PDCA循环,一个老话题了,大家都知道要这么做,但在平时的生活和工作当中,你是否真的都这样做呢? 当你发现你面对的困难重重,寸步难行时,是否反思过是因为自己一开始的方法就不正确? 本文包涵了PDCA循 ...
- ffmpeg简易播放器(1)--了解视频格式
视频帧 对于一份视频,实质上是多张图片高速播放形成的.每一张图片即为该视频的一帧.而每秒钟播放的图片张数便为所谓的帧率(Frame Rate/Frame Per Second).常见的帧率有24fps ...
- 插入dp学习笔记
定义 插入 \(\text{dp}\) 适用于计数.求最优解且具有选择.排列元素过程等题目. 插入 \(\text{dp}\) 大致分为两类: 乱搞型:状态定义天马行空,但始终围绕着将新元素插入到旧元 ...