JavaScript中不同场景下实现虚拟列表

最新推荐文章于 2024-08-20 10:25:59 发布

创梦引领

最新推荐文章于 2024-08-20 10:25:59 发布

阅读量99

点赞数

本文链接：https://blog.youkuaiyun.com/python_bug262/article/details/133288556

版权

JavaScript 专栏收录该内容

313 篇文章 ¥59.90 ¥99.00

订阅专栏

虚拟列表是一种优化技术，用于处理大量数据的列表渲染。它通过只渲染可见区域的列表项，而不是全部渲染，从而提高页面性能和用户体验。在JavaScript中，我们可以使用一些技术来实现虚拟列表，包括使用滚动监听、动态渲染和缓存数据等。下面我们将详细介绍如何在不同场景下实现虚拟列表。

基本的虚拟列表实现

首先，我们来看一个基本的虚拟列表实现，该实现适用于简单的静态列表，不涉及异步加载或动态数据更新。

// HTML结构
<div id="list-container">
  <ul id="list">
    <

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

创梦引领

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

自定义滚动条 - 实现自定义样式的虚拟列表

EuForth的博客

09-26

本文将介绍如何使用 JavaScript 来自定义滚动条，并结合虚拟列表的概念，实现一个高效的列表滚动体验。现在，当你在浏览器中打开包含上述 HTML 和 CSS 代码的页面时，你将看到一个带有自定义样式的滚动条和一个虚拟列表。当你滚动容器滚动条时，列表内容会根据滚动位置进行动态更新，只渲染可见的列表项，从而提供更高效的列表滚动体验。然后，我们定义了一些变量，包括总列表项数量、可见列表项数量和列表项的高度。函数，它根据给定的起始索引值生成可见的列表项，并将它们添加到列表元素中。函数，用于创建列表项元素。

JS滚动列表加载

12-01

参数说明 listLoadingMore({id:"",id2:function(){},action:function(){},pageNum:10,getNew:undefined,funcArg:undefined,func:function(){},loadingMustTime:0,loadingDom:function(){},loadedDom:function(){},nullDataFunc:function(){},endFunc:function(){},errorFunc:function(){}}); id：滚动条id，不可以是body； id2：滚动列表的id，通过function自行根据情况返回； action：数据来源的ajax地址，插件会自动加上page和length(分别表示请求页数和当前已有记录数)，返回格式统一是[{},{}...]，此类jsonArray； ajaxType：ajax提交方式，将更改传递数据的方式，默认post； pageNum：每页加载数量，将会根据这个数量判断是否全部加载完成； getNew：自定义获取数据方法； funcArg：自定义获取数据时传递的参数，类型为函数，返回所需参数； childrenTag：列表子项的标签，默认LI； func：非自定义获取数据时，创建每行数据的方法； loadingMustTime：强制最小加载时间，默认0； loadingDom：加载中动画自定义，返回Dom或者HTML代码； loadedDom：完全加载完成动画自定义，返回Dom或者HTML代码； nullDataFunc：数据列表为空时执行的方法； endFunc：每页数据加载完成时执行的方法； errorFunc：ajax获取数据失败时调用的方法。回调方法调用本方法初始化后将会得到一个专属的方法集： Object {getNew:function,isFull:function,isRunning:function,isStop:function,loading:function,show:function}; getNew()：忽略判断条件，强制执行加载操作。此时数据传递中,page值可能出错，但length值一定正确，请谨慎判断后在执行该方法； isFull(boolean)：修改列表加载完成标志。true为全部加载完成，false则相反； isRunning(boolean)：修改列表当前是否正在加载中标志。几乎没有使用的机会； isStop(boolean)：设置是否停止加载，设置为true时将会阻止未来的所有加载操作； loading()：根据当前滚动条的位置，自动判断是否需要加载新数据； show(boolean,boolean)：强制设置加载中和加载完成dom的显示或隐藏，true表示显示，false相对。

1 条评论您还未登录，请先登录后发表或查看评论

用JS实现虚拟列表（IT枫斗者）

IT枫斗者的博客

05-17

1382

当一个列表需要渲染大量数据的时候是非常耗时的，而且在列表滚动的过程中会出现卡顿的现象。即使用上懒加载解决了列表初始化时渲染过慢的问题，但是每次拉取下一页数据的时候都会造成列表的重新渲染。随着拉取的数据越来越多，列表渲染时间长、卡顿的问题依然存在。这个时候虚拟列表就派上用场了。虚拟列表的实现原理简单来说，就是列表并不会把所有的数据都渲染出来，而是通过监听滚动事件然后实时计算当前是哪几条数据显示在页面上，然后只渲染用户可以看见的这几条数据。

原生JS实现虚拟列表

最新发布

凌凌的博客

08-20

1060

如果我们要将一个数组渲染为列表添加到页面中，我们可以很容易实现，无非就是循环遍历这个数组，然后依次创建 DOM 元素插入即可，但是如果数据量很庞大，比如有一万条数据，我们就要把一万个 DOM 结点插入到页面中，这显然会导致页面的卡顿。为了针对这个场景进行优化，让页面和我们这个列表不那么卡顿，就可以使用虚拟列表来解决。

【js】无限虚拟列表的原理及实现

weixin_52418790的博客

02-22

4560

虚拟列表是长列表按需显示思路的一种实现，即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。简而言之，虚拟列表指的就是「可视区域渲染」的列表。定义固定宽高的元素，该区域限制无限虚拟列表的可视区域大小宽高为父元素的100%，纵向超出可滚动宽度100%，高度auto，用于呈放渲染的部分列表项，撑开可滚动区域。

html虚拟列表,vue-better-list-view 长列表 / 虚拟列表组件 - 文章教程

weixin_39533307的博客

06-19

455

网页数据加载多了都会出现卡顿，手机端的列表一般都是无限加载的，加载的数据量大了我们就需要特殊处理下了，vue-better-list-view 这个组件就是为了解决这个问题。使用提供 npm 版本和 umd 版本npm 安装// installnpm i vue-better-list-view --save-dev// in your projectimport listView from 'v...

html虚拟列表,vue实现虚拟列表功能的代码

weixin_36114355的博客

06-19

404

当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的我们可以用虚拟列表解决这个问题一步步来首先看一下效果这是data中的数据data() {return {list:...

虚拟列表的实现

Angela_L的博客

08-29

413

在传统的列表渲染中，如果列表数据过多，一次性渲染所有数据将耗费大量的时间和内存。当我们上下滚动时，性能低的浏览器或电脑都会感觉到非常的卡，这对用户的体验时是致命的。于是我们会想到懒加载，当资源到达可视窗口内时，继续向服务器发送请求获取接下来的资源，不过当获取的资源越来越多时，此时浏览器不断重绘与重排，这样的开销也是要考虑的当数量多到一定程度时，页面也会出现卡顿。此时我们会想到虚拟列表，虚拟列表只渲染当前可见的部分数据，随着滚动条的滚动，只渲染当前可见的列表项，从而大大减少了渲染时间。

html表格制作虚拟长列表+冻结列

Hhuangjialin的博客

02-16

541

<template> <div class="content"> <el-button type="primary" class="button1" @click="click1">搜索</el-button> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="空运中心" name="first"&gt...

原生写一个简单的虚拟列表

qq_56631103的博客

06-09

261

虚拟列表的原理是只渲染当前可见区域内的数据，而不是一次性渲染整个列表。当用户向下滚动时，虚拟列表会动态地渲染新的数据并同时移除已经离开可见区域的数据。这种技术可以大大减少内存占用和渲染时间，提高列表的性能和用户体验。虚拟列表（Virtual List）是一种优化大型列表渲染性能的技术。在传统的列表渲染中，如果列表中有大量数据，那么所有的数据都会被一次性渲染出来，这会导致内存占用和渲染时间的大幅增加。今天分享一下原生如何实现一个简单虚拟列表。

使用 Vue 实现一个虚拟列表的方法

10-16

主要介绍了使用 Vue 实现一个虚拟列表的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

js实现前端无限滚动中的虚拟列表效果(只渲染可视区域，dom元素可复用)

HHH917的博客

08-26

6542

初次效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>无限滚动(只渲染可视区域，dom元素可复用)</title> <meta name="viewport" content="initial-scale=1.0

前端大数据量渲染——虚拟列表

sxp19980829的博客

02-15

1233

前端大数据量渲染处理方式，虚拟列表不会一次性将所有数据都渲染到页面中，而是只渲染可视区域的内容，当鼠标滚动时，再渲染下一波内容，即虚拟列表中的dom元素始终是指定数目的。当从后端一次性取到成千条数据进行页面渲染，再对页面进行操作很可能导致页面崩溃，这时就可以用虚拟列表的方法，进行页面的渲染。

虚拟列表的实现原理

weixin_52255957的博客

04-22

291

2、添加监听事件scroll，通过鼠标滚动的高度求出可视区域第一个item的索引（startIndex），再根据可视区域可展示的总数（VISIBLE_ITEM_COUNT）计算出可视区域最后一个item的索引。1、设置每个item项的高度、最多有几个item ，利用listContainer.clientHeight可视区域高度/item的高度，从而求出可视区域有几个item。当页面加载的数据很多时，会让浏览器的性能降低，此时我们可以按需加载，只加载我们可以看到的区域，而虚拟列表就是这个功能。

js 实现虚拟列表

weixin_37795155的博客

07-21

2878

js 实现虚拟列表

JavaScript 中的虚拟列表: 优化性能的秘密武器

XymkMl的博客

10-04

220

虚拟列表是指将大型数据集分割成多个可见区域的技术，只渲染当前可见区域内的数据，而不是一次性渲染整个列表。这种技术在处理包含大量数据的列表时非常有用，可以显著提高性能和响应速度。除了使用第三方库外，你也可以自己实现虚拟列表的逻辑。i++) {${i ++) {// 初始化渲染 renderItems(0);${i ++) {// 初始化渲染 renderItems(0);px`;// 初始化渲染。

虚拟列表-解决前端快速绘制上万条数据问题

qq_44626187的博客

12-29

587

虚拟列表即只加载绘制界面可视区域数据，对溢出部分的区域进行数据清除、不绘制处理，该方式能大大提高渲染的性能。

浅谈Javascript虚拟列表(virtaul list)改造成虚拟表格(virtaul table)的技术

qq996150938的专栏

03-22

1046

4、padding填充内部实现内部内容高度的增高大约只支持到 55.92w条左右，超过这个数，将无法显示，因为chrome浏览器似乎支持的最大padding-bottom的值是33551640px，所以如果有需要超过这个值的需求，padding撑起内部内容高度实现滚动条是不可取的，必须自定义滚动条支持超过55.9万条的数据。总结，如果实际需求中碰不到超过10万条的数据，这种方式处理10万条的数据，还是很优秀的，但是我想要他支持百万，可超过27万就出现了不可解决的问题。