文章目录

一、分批渲染1、setTimeout定时器分批渲染2、使用requestAnimationFrame()改进渲染2.1、什么是requestAnimationFrame2.2、为什么使用requestAnimationFrame而不是setTimeout或setInterval2.3、requestAnimationFrame的优势和适用场景

二、滚动触底加载数据三、Element-Plus虚拟化表格四、自定义虚拟滚动列表1、视图结构2、基本思路3、具体计算4、实现代码

五、使用el-table-infinite-scroll插件1、el-table-infinite-scroll(vue3)2、el-table-infinite-scroll(vue2)

六、使用Web Workers处理数据七、借助服务端渲染（SSR）

处理大量数据的渲染对于前端开发来说是一项挑战，但也是提升网页性能和用户体验的重要环节。要有效解决这一问题，可以采用虚拟滚动（Virtual Scrolling）、分批渲染（Incremental Rendering）、使用Web Workers处理数据、利用前端分页（Pagination）、借助服务端渲染（SSR）来优化大量数据的处理。其中，虚拟滚动是一种非常有效的技术，它通过只渲染用户可见的列表项来极大减少DOM操作和提高性能。这种方式不仅提升了滚动的流畅度，也减轻了浏览器的负担，尤其适用于长列表数据的展示。

一、分批渲染

分批渲染或称增量渲染，是指将数据分成若干批次进行处理和渲染，每次只处理一小部分数据，通过逐步完成整体渲染的方式，避免了一次性处理大量数据造成的卡顿现象。

实现分批渲染通常可以通过requestAnimationFrame()或setTimeout()等异步API分配任务，确保在每个渲染帧中只处理足够少的数据，避免阻塞主线程。

1、setTimeout定时器分批渲染

<code>//发送请求

onMounted(() => {

getData()

})

//获取数据

const getData = () => {

fetch('http://124.223.69.156:3300/bigData')

.then(res => res.json())

.then(data => {

let newData = chunksData(data.data)

console.log(newData);

})

.catch(err => console.log(err));

}

//数据分页

const chunksData = (arr) => {

let chunkSize = 10;

let chunks = [];

for (let i = 0; i < arr.length; i += chunkSize) {

chunks.push(arr.slice(i, i + chunkSize));

}

return chunks

}

//setTimeout分页渲染

for (let i = 0; i < newData.length; i++) {

setTimeout(() => {

tableData.push(...newData[i])

}, 100*i)

}

2、使用requestAnimationFrame()改进渲染

2.1、什么是requestAnimationFrame

requestAnimationFrame是浏览器用于定时循环操作的一个API,通常用于动画和游戏开发。它会把每一帧中的所有DOM操作集中起来,在重绘之前一次性更新,并且关联到浏览器的重绘操作。

2.2、为什么使用requestAnimationFrame而不是setTimeout或setInterval

与setTimeout或setInterval相比,requestAnimationFrame具有以下优势:

通过系统时间间隔来调用回调函数，无需担心系统负载和阻塞问题，系统会自动调整回调频率。由浏览器内部进行调度和优化，性能更高，消耗的CPU和GPU资源更少。避免帧丢失现象，确保回调连续执行，实现更流畅的动画效果。自动合并多个回调，避免不必要的开销。与浏览器的刷新同步，不会在浏览器页面不可见时执行回调。

2.3、requestAnimationFrame的优势和适用场景

requestAnimationFrame最适用于需要连续高频执行的动画,如游戏开发,数据可视化动画等。它与浏览器刷新周期保持一致,不会因为间隔时间不均匀而导致动画卡顿。

const renderData = (page) => {

if(page >= newData.length) return

requestAnimationFrame(() => {

tableData.push(...newData[page])

page++

renderData(page)

})

}

renderData(0)

二、滚动触底加载数据

前端分页是处理大量数据渲染的另一种常见策略，它通过每次只向用户展示一部分数据，让用户通过分页控件浏览完整的数据集。

实现前端分页首先需要从后端一次性获取完整数据，然后根据设定的每页数据量在前端进行切分，每次仅加载和渲染当前页的数据。这种方式减轻了单次渲染的负担，但增加了数据管理的复杂性。

//发送请求

onMounted(() => {

getData()

})

//获取数据

const getData = () => {

fetch('http://124.223.69.156:3300/bigData')

.then(res => res.json())

.then(data => {

let newData = chunksData(data.data)

//保存所有数据

totalData.push(newData)

//渲染第一页面数据

renderData()

})

.catch(err => console.log(err));

}

//数据分页

const chunksData = (arr) => {

let chunkSize = 10;

let chunks = [];

for (let i = 0; i < arr.length; i += chunkSize) {

chunks.push(arr.slice(i, i + chunkSize));

}

return chunks

}

//渲染数据

const renderData = () => {

if(totalData.length == 0) return

//添加第一页数据

tableData.push(...totalData[0])

//删除第一页数据

totalData.shift()

}

监听滚动事件，触底触底时触发renderData事件，继续加载下一页数据。

三、Element-Plus虚拟化表格

Element Plus 提供 的Virtualized Table 虚拟化表格

在前端开发领域，表格一直都是一个高频出现的组件，尤其是在中后台和数据分析场景。 但是，对于 Table V1来说，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。

通过虚拟化表格组件，超大数据渲染将不再是一个头疼的问题。

即使虚拟化的表格是高效的，但是当数据负载过大时，网络和内存容量也会成为您应用程序的瓶颈。

因此请牢记，虚拟化表格永远不是最完美的解决方案，请考虑数据分页、过滤器等优化方案。

<template>

<div style="width: 100%;height: 100%">code>

<el-auto-resizer>

<template #default="{ height, width }">code>

<el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed />code>

</template>

</el-auto-resizer>

</div>

</template>

<script setup>

import { onMounted, reactive } from 'vue';

const tableData = reactive([])

const columns = [{

key: 'id',

dataKey: 'id',

title: 'ID',

width: 140

},

{

key: 'name',

dataKey: 'name',

title: 'Name',

width: 140,

},

{

key: 'value',

dataKey: 'value',

title: 'Value',

width: 140,

}]

//获取数据

onMounted(() => {

getData()

})

const getData = () => {

fetch('http://124.223.69.156:3300/bigData')

.then(res => res.json())

.then(data => {

tableData.push(...data.data)

})

.catch(err => console.log(err));

}

</script>

四、自定义虚拟滚动列表