虚拟表格（第一种实现）

实现描述

**1.我们创建三个相互嵌套的标签，最外层的用于提供一个滚动的框架，中间层用于模拟列表的高度，里层用于存放渲染的数据
，最外层我们设置一下宽高并且使用overflow属性裁切一下，让他有滚动条，在最里层的子元素div标签设置一position:sticky 属性，这个属性
用于在目标区域在屏幕中的时候，他就相当于相对定位，当页面滚动超出目标区域时，就像固定定位，固定到目标位置

1.获取三个元素的dom节点
2.我们将最外层的盒子高度设置为滚动高度
3.其次计算初始的index
我们获取滚动条的高度除以每一项的高度即为初始的下标
4.写一个render函数，这个函数主要用于渲染
我们将计算出的开始节点以及要渲染的整个数组和渲染的长度传递进去；
然后我们将要渲染的数据获取出来，slice(起始，起始+渲染长度)
创建一个虚拟的节点对象
使用数组循环，创建dom节点并将其放入创建好的虚拟节点中
循环完成再将最里层的dom进行替换
再加一个监听器监听滚动事件每当滚动触发，就将重新计算初始的下标并重新调用render函数重新渲染
5. 初始化render函数（起始下标,渲染长度,数据源）
6.加一个滚动条监听事件用于重新计算初始下标，并且再次调用render函数
**

代码块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>虚拟表格||大数据表格</title><style>.virtual-scroll {width: 200px;height: 300px;overflow-y: auto;}#container {background-color: skyblue;}#container>div {position: sticky;/* 这个属性能保证item-container能在渲染区域 哪怕滚动 */top: 0;}</style>
</head><body><div class="virtual-scroll"><!-- 提供滚动框架 --><div id="container"><!-- // 模拟长列表高度 --><div id="item-container"></div><!-- // 存放渲染数据 --></div></div>
</body>
<script>// 生成数据源，与逻辑无关let list = [];for (let i = 0; i < 10000; i++) {let id = Math.random();(function () {list.push({ id })})(id)}// 正式开始// 获取dom节点const containerDom = document.querySelector("#container")const scrollDom = document.querySelector(".virtual-scroll")const itemDom = document.querySelector("#item-container")// 设置滚动框架的高度（滚动高度）containerDom.style.cssText = `height: ${ list.length * 30 }px;` // 模拟长列表// 核心const render = (initIndex = 0, data = []) => {const renderData = data.slice(initIndex, initIndex + 10);const fragment = document.createDocumentFragment();renderData.forEach((item) => {const div = document.createElement('div');div.innerText = item.iddiv.style.cssText = "height: 30px"fragment.appendChild(div)})itemDom.replaceChildren(fragment)}// 初始化render(0, list) // 监听滚动条事件重新获取下标并重新渲染scrollDom.addEventListener('scroll', scrollTarget => {render( Math.ceil(scrollTarget.target.scrollTop / 30), list)})// })
</script></html>

渲染出的dom结构

第二种实现（表现渲染不卡顿，实际全部都渲染了）

实现描述

**1. 主要思想：每次渲染几条，利用定时器不断地在页面添加渲染的节点
2.利用定时器window.requestAnimationFrame()将document.createDocumentFragment()创建的虚拟节点不停的放入dom容器中
讲一下这两个方法：
requestAnimationFrame()，他的作用就是代替定时器做更加流畅高性能的动画，做可以匹配设备刷新率的动画，他解决了定时器做动画时间间隔不稳定的问题（也就是解决定时器做动画不流畅的问题）。他的用法与setTimeout差不多。比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
createdocumentfragment()方法是用于创建了一个虚拟的节点对象，用于存放一次加载dom对象
**

代码块

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul id="ul-container"></ul><script>// 每次渲染条数const renderSize = 100;// 渲染的次数const renderCount = Math.ceil(100000/renderSize);// 获取渲染的dom容器const container = document.querySelector('#ul-container');// 已经渲染的次数let alreadyRender = 0;function add() {// 创建虚拟节点const fragment = document.createDocumentFragment(); for(let i = 0; i < renderCount; i++) {const li = document.createElement('li');li.innerHTML = Math.floor(Math.random() *100000);fragment.append(li);}container.appendChild(fragment);alreadyRender++;loop();}function loop() {if(alreadyRender<renderCount) {window.requestAnimationFrame(add)}}loop();</script>
</body>
</html>

渲染出的dom结构

虚拟表格（大数据表格）相关推荐

JS 原生自动加载的大数据表格探索
目录尝试1.使用table初级实现动态加载关键代码效果尝试2.使用绝对定位优化表格效果尝试3.绝对定位+scroll动态加载优化尝试效果尝试4. table + 绝对定位 + scro ...
vue大数据表格解决方案的比较
前言近些年公司一直采用vue2.x+Element UI进行开发,对于Element UI,由于起步较早,相关的生态一直比较成熟,各种问题在某度上也能找到比较完美的解决方案,最最重要的一点是bug也 ...
使用 AntV S2 打造大数据表格组件
导读在蚂蚁的大数据研发平台中,数据表格是一类重要的业务组件.我们需要流畅的展示 SQL 查询出来的上万条结果,并对结果做筛选.排序.搜索.复制.框选.聚合分析等操作.同时也存在数据手工录入的场景,需 ...
vue渲染大量数据优化_vue大数据表格卡顿问题的完美解决方案
前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系 ...
电子沙盘数字沙盘M3D GIS虚拟三维大数据人工智能无人机倾斜摄影三维全景建模课程第47课
电子沙盘数字沙盘M3D GIS虚拟三维大数据人工智能无人机倾斜摄影三维全景建模课程第47课设置system.ini 如下内容 Server=122.112.229.220 user=GisTest ...
Flask+MySQL大数据表格分页显示
1.显示效果界面主要由两部分完成顶部搜索栏:按条件传参给后端请求,控制表格数据重载刷新底部表格:接收后端返回JSON数据,对表格渲染显示 2.前端传参前端采用Layui框架渲染,对页码和条数传 ...
php删除表格命令,数据表格-删除
> 前端部分 //定义表格 //表格行事件查看编辑删除 //表格渲染 layui.use(["table", "util", "form& ...
html 可折叠的表格,Layui数据表格展开折叠
layui elem:'#tableOut', data: [ { id:1, name:'小米', age:'16', friend: [{ id:2, name:'大米', age:'28'}, ...
大数据量树形数据表格展示, 虚拟表格,el-table, umy-ui, 表格懒加载
1. 出现的问题要展示树形数据表格,根据当前点击的表格行去请求新的数据并展示, 基于这种情况遇到以下问题 1). 当树形表格数据层级大于五级且数据量较多时, 浏览器崩溃 2). 当数据条数展示超出5 ...

虚拟表格（大数据表格）

虚拟表格（第一种实现）

实现描述

代码块

渲染出的dom结构

第二种实现（表现渲染不卡顿，实际全部都渲染了）

实现描述

代码块

渲染出的dom结构

虚拟表格（大数据表格）相关推荐

最新文章

热门文章