前言
针对表格展示数据，用户提出要求前端在表格下面有一展示多少条数据的选项，如果要求一次性展示10000条数据，如果直接染会造成页面的卡顿，渲染速度下降，内容展示慢,如果有操作，操作会卡顿
下面总结常见的几种大数据渲染方案
虚拟列表渲染
用虚拟列表的手段，即先对设置的可见区域内的数据进行演染，然后计算出鼠标滚动距离大约是滚动了多少项，通过动态的设置距离顶部的top值达到可见区域动态染数据不会卡顿的效果
<template>
<!-- 虚拟列表容器 -->
<div
class="virtualListWrap"
ref="virtualListWrap"
:style="{ height: itemHeight * count + 'px' }"
@scroll="handleScroll"
>
<!-- 占位元素，高度为所有数据的总高度 -->
<div
class="placeholderDom"
:style="{ height: allListData.length * itemHeight + 'px' }"
>
</div>
<!-- 实际显示的内容区域 -->
<div class="contentList" :style="{ top: topVal }">
<!-- 循环渲染可见的数据项 -->
<div
v-for="(item, index) in showListData"
:key="index"
class="itemClass"
:style="{ height: itemHeight + 'px' }"
>
{
{
item.name }}
</div>
</div>
<!-- 加载提示 -->
<div class="loadingBox" v-show="loading">
<i class="el-icon-loading"></i>
<span>loading...</span>
</div>
</div>
</template>
<script setup>
import {
ref, computed, onMounted } from 'vue';
import axios from "axios";
const allListData = ref([]); // 存储所有数据的数组
const itemHeight = 40; // 每个列表项的高度（像素）
const count = 10; // 一次显示的数据项数量
const start = ref(0); // 当前可见区域的起始索引
const end = ref(10); // 当前可见区域的结束索引
const topVal = ref('0px'); // 内容区域的顶部偏移量
const loading = ref(false); // 控制加载提示的显示
const virtualListWrap = ref(null);
// 计算当前应该显示的数据
const showListData = computed(() => {
return allListData.value.slice(start.value, end.value);
});
// 组件挂载后加载数据
onMounted(async () => {
loading.value = true;
const res = await axios.get("http://124.223.69.156:3300/bigData");
allListData.value = res.data.data;
loading.value = false;
});
// 处理滚动事件
const handleScroll = () => {
// 获取滚动条位置
const scrollTop = virtualListWrap.value.scrollTop;
// 计算新的起始索引
start.value = Math.floor(scrollTop / itemHeight);
// 计算新的结束索引
end.value = start.value + count;
// 更新内容区域的顶部偏移量
topVal.value = scrollTop + 'px';
};
</script>
<style scoped lang="less">
// 虚拟列表容器盒子
.virtualListWrap {
box-sizing: border-box;
width: 240px;
border: solid 1px #000000;
// 开启滚动条
overflow-y: auto;
// 开启相对定位
position: relative;
.contentList {
width: 100%;
height: auto;
// 搭配使用绝对定位
position: absolute;
top: 0;
left: 0;
.itemClass {
box-sizing: border-box;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
}
// 奇偶行改一个颜色
.itemClass:nth-child(even) {
background: #c7edcc;
}
.itemClass:nth-child(odd) {
background: pink;
}
}
.loadingBox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.64);
color: green;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
分堆渲染
通过将数据分成小块，只有当前可视区域的数据会被加载，这样避免了由于一次性加载大量数据而引发的性能瓶颈，从而减少了初始渲染时间，让用户可以快速看到界面。其次，分堆渲染有效降低了内存占用，因为系统只需保持当前可视部分的数据在内存中，尤其在处理大规模数据时，这种策略能显著提升应用的流畅度，防止因内存不足导致的崩溃或卡顿现象。此外，用户体验得到了极大的改善，用户在滚动或翻页时，新数据可以无缝加载，避免了传统分页方式中需要等待新页面加载的尴尬，让用户的操作更加自然和顺畅。
把大数据一维数组通过while循环变成二维数组，然后借助requestanimationframeAPI对二维数组里面的每一堆进行分堆染达到染数据不卡顿的效果
<template>
<div v-if="activeName === 'first'">
<el-button
style="margin-bottom: 12px"
size="small"
type="primary"
:loading="loading"
@click="plan"
>点击请求加载</el-button
>
<el-table
height="300"
:data="arr"
border
style="width: 80%"
:header-cell-style="{
height: '24px',
lineHeight: '24px',
color: '#606266',
background: '#F5F5F5',
fontWeight: 'bold',
}"
>
<el-table-column type="index" label="序"></el-table-column>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="名字"></el-table-column>
<el-table-column prop="value" label="对应值"></el-table-column>
</el-table>
</div>
</template>
<script>
import {
ref } from 'vue';
import axios from "axios";
const arr = ref([]);
const loading = ref(false);
const averageFn = (arr) => {
let i = 0;
let res = [];
while (i < arr.length) {
res.push(arr.slice(i, i + 10));
i = i + 10;
}
return res;
};
const plan = async () => {
loading.value = true;
const res = await axios.get('http://124.223.69.156:3300/bigData');
loading.value = false;
const resArr = averageFn(res.data.data);
const useArr = (page) => {
if (page > resArr.length - 1) {
return;
}
requestAnimationFrame(() => {
arr.value = [...arr.value, ...resArr[page]];
page = page + 1;
useArr(page);
});
};
useArr(0);
};
</script>
<style lang="less" scoped>
.bigDataBox {
box-sizing: border-box;
padding-right: 240px;
}
</style>
触底加载
无缝的交互方式让他们感觉更加自然，能够持续浏览内容。其次，触底加载能够有效管理数据的加载量，系统只在用户即将到达页面底部时才渲染新的数据，提高了加载速度
<template>
<!-- 触底加载 -->
<div class="box">
<el-table
v-el-table-infinite-scroll="load"
height="480"
:data="tableData"
border
style="width: 80%"
v-loading="loading"
element-loading-text="稍后..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.5)"
:header-cell-style="{
height: '24px',
lineHeight: '24px',
color: '#606266',
background: '#F5F5F5',
fontWeight: 'bold',
}"
>
<el-table-column type="index" label="序"></el-table-column>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="名字"></el-table-column>
<el-table-column prop="value" label="对应值"></el-table-column>
</el-table>
</div>
</template>
KKKKKKKKKKKKKKKKKK
<script setup>
import {
ref, onMounted } from 'vue';
import axios from "axios";
KKKKKKKKKKKKKKKKfunction averageFn(arr) {
let i = 0;
let result = [];
while (i < arr.length) {
result.push(arr.slice(i, i + 10)); // 一次截取10个用于分堆
KKKKKKKKKKKKKK
i = i + 10; // 这10个截取完，再准备截取下10个
}
return result;
}
KKKKKKKKKKKK
const allTableData = ref([]);
const tableData = ref([]);
const loading = ref(false);
// 第一步，请求大量数据时候，转成二维数组，分堆分组分KKKKKKKKKK块存储
onMounted(async () => {
loading.value = true;
const res = await axios.get("http://124.223.69.156:3300/bigData");
KKKKKKKKallTableData.value = averageFn(res.data.data);
// 也可以存一份原始值，留作备用，都行的
// const originalAllTableData = allTableData.value;
loading.value = false;
load();
KKKKKK
});
const load = async () => {
// console.log("自动多次执行之，首次执行会根据高度去计算要执行几次合适");
//KKKK 第四步，触底加载相当于把二维数组的每一项取出来用，用完时return停止即可
if (allTableData.value.length == 0) {
console.log("没数据啦");
return;
}
// 第二步，加载的时候，把二维数组的第一项取出来，拼接到要展示的表格数据中去
let arr = allTableData.value[0];
tableData.value = tableData.value.concat(arr);
// console.log(tableData.value);
// 第三步，拼接展示以后，再把二维数组的第一项的数据删除即可
allTableData.value.shift();
};
</script>
本篇文章到这里就结束了,如果对你有所帮助就点个赞吧 会持续更新技术文章