深度剖析：前端如何驾驭海量数据，实现流畅渲染的多种途径

文章目录

      • 一、分批渲染
        • 1、setTimeout定时器分批渲染
        • 2、使用requestAnimationFrame()改进渲染
          • 2.1、什么是requestAnimationFrame
          • 2.2、为什么使用requestAnimationFrame而不是setTimeout或setInterval
          • 2.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定时器分批渲染
//发送请求
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) returnrequestAnimationFrame(() => {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%"><el-auto-resizer><template #default="{ height, width }"><el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed /></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>

四、自定义虚拟滚动列表

虚拟滚动是通过仅渲染用户当前可视区域内的元素，当用户滚动时动态加载和卸载数据，从而实现长列表的高效渲染。这种方法能显著减少页面初始化时的渲染负担，加快首次渲染速度。

虚拟滚动实现的核心在于计算哪些数据应当被渲染在屏幕上。这涉及到监听滚动事件，根据滚动位置计算当前可视范围内的数据索引，然后仅渲染这部分数据。还需要处理好滚动条的位置和大小，确保用户体验的一致性。

1、视图结构
  • viewport：可视区域的容器
  • list-area：列表项的渲染区域
<div class="viewport" ref="viewport"><div class="list-area"><!-- item-1 --> <!-- item-2 --> <!-- item-n --> </div>
</div>
2、基本思路

虚拟列表的核心思路是 处理用户滚动时可视区域数据的显示 和 可视区外数据的隐藏，这里为了方便说明，引入以下相关变量：

  • totalList ：总列表数据
  • startIndex ：可视区域的开始索引
  • endIndex ：可视区域的结束索引
  • paddingTop ：可视区域的上内边距
  • paddingBottom ：可视区域的下内边距

当用户滚动列表时：

  • 计算可视区域的 开始索引 和 结束索引
  • 根据 开始索引 和 结束索引 渲染数据
  • 计算 可视区域的上内边距 和下内边距 显示滚动条位置
3、具体计算

先假定可视区的高度固定为600px，每个列表项的高度固定为60px，则我们可设置和推导出：

  • 可视区高度： viewportHeight = 600
  • 列表项高度： itemSize = 60
  • 可视区开始索引： startIndex = 0
  • 可视区结束索引 ：endIndex = startIndex + viewportHeight / itemSize

当用户滚动时，逻辑处理如下：

  • 获取可视区滚动距离 scrollTop;
  • 根据 滚动距离 scrollTop 和 单个列表项高度 itemSize 计算出 开始索引 startIndex = Math.floor(scrollTop / itemSize);
  • 可视区域的上内边距 paddingTop = scrollTop;
  • 可视区域的上内边距 paddingBottom = totalList * itemSize - viewportHeight - scrollTop;
  • 只显示 开始索引 和 结束索引 之间的列表项;
4、实现代码
<template><div class="viewport" ref="viewport"><div class="list-area" :style="styleObject"><div v-for="(item, index) in scrollList" :key="index" class="item">index:{{ index }}  id:{{ item.id }}  name:{{item.name }}</div></div></div>
</template>
<script setup>
import { onMounted, reactive, ref, computed, onBeforeUnmount } from 'vue';
//总列表的数据
const totalList = reactive([])
//可视区域的开始索引
let startIndex = ref(0)
// 假设每个列表项的高度是60px
let itemSize = ref(60)
//可视区域的上内边距
let paddingTop = ref(0)
//可视区域的下内边距
let paddingBottom = ref(0)
//容器的高度
let viewportHeight = ref(600)
//容器
const viewport = ref(null)// 计算可视区域的列表数据  
const scrollList = computed(() => {return totalList.slice(startIndex.value, endIndex.value);
})// 计算可视区域的高度和内边距
const styleObject = computed(() => {return {paddingTop: `${paddingTop.value}px`,paddingBottom: `${paddingBottom.value}px`,height: `${viewportHeight.value}px`}
})// 计算可视区域的结束索引  
const endIndex = computed(() => {return Math.min(totalList.length, startIndex.value + Math.ceil(viewportHeight.value / itemSize.value));
})//发送请求获取数据
onMounted(() => {getData()
})//获取数据
const getData = () => {fetch('http://124.223.69.156:3300/bigData').then(res => res.json()).then(data => {let newArr = data.datatotalList.push(...newArr)initScrollListener()}).catch(err => console.log(err));
}// 监听可视区域滚动事件
const initScrollListener = () => {scrollListener()viewport.value.addEventListener('scroll', scrollListener);
}// 计算可视区域的内边距
const scrollListener = () => {// 计算可视区域滚动距离const scrollTop = viewport.value.scrollTop;// 计算可视区域的开始索引startIndex.value = Math.max(0, Math.floor(scrollTop / itemSize.value));// 计算可视区域的上内边距paddingTop.value = scrollTop;// 如果是最后一页，则不需要额外的底部填充  if (endIndex.value >= totalList.length) {paddingBottom.value = 0;} else {// 计算可视区域的下内边距paddingBottom.value = totalList.length * itemSize.value - viewportHeight.value - scrollTop;}
}// 移除可视区域滚动事件
onBeforeUnmount(() => {removeScrollListener()
})// 移除可视区域滚动事件
const removeScrollListener = () => {viewport.value.removeEventListener('scroll', scrollListener);
}<style scoped>
.viewport {width: 600px;height: 600px;overflow: auto;border: 1px solid #D3DCE6;margin: auto;
}.item {height: 59px;line-height: 60px;border-bottom: 1px solid #D3DCE6;padding-left: 20px;
}
</style>

这里可以看出，永远只渲染10条数据。随着滚动条滚动，动态渲染10条数据。
在这里插入图片描述
在这里插入图片描述

五、使用el-table-infinite-scroll插件

1、el-table-infinite-scroll(vue3)
  • 安装
npm install --save el-table-infinite-scroll
  • 全局引入
import ElTableInfiniteScroll from "el-table-infinite-scroll";
app.use(ElTableInfiniteScroll);
  • 局部引入
<template><el-table v-el-table-infinite-scroll="load"></el-table>
</template><script setup>
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
</script>
  • 组件中使用
<template><p style="margin-bottom: 8px"><span>loaded page(total: {{ total }}): {{ page }}, </span>disabled:<el-switch v-model="disabled" :disabled="page >= total"></el-switch></p><el-tablev-el-table-infinite-scroll="load":data="data":infinite-scroll-disabled="disabled"height="200px"><el-table-column type="index" /><el-table-column prop="date" label="date" /><el-table-column prop="name" label="name" /><el-table-column prop="age" label="age" /></el-table>
</template><script setup>
import { ref } from 'vue';const dataTemplate = new Array(10).fill({date: '2009-01-01',name: 'Tom',age: '30',
});const data = ref([]);
const disabled = ref(false);
const page = ref(0);
const total = ref(5);const load = () => {if (disabled.value) return;page.value++;if (page.value <= total.value) {data.value = data.value.concat(dataTemplate);}if (page.value === total.value) {disabled.value = true;}
};
</script><style lang="scss" scoped>
.el-table {:deep(table) {margin: 0;}
}
</style>
2、el-table-infinite-scroll(vue2)
  • 安装
npm install --save el-table-infinite-scroll@2
  • 全局引入
import Vue from "vue";
import ElTableInfiniteScroll from "el-table-infinite-scroll";
Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);
  • 局部引入
<script>
import ElTableInfiniteScroll from "el-table-infinite-scroll";
export default {directives: {"el-table-infinite-scroll": ElTableInfiniteScroll,},
};
</script>
  • 组件中使用
<template><el-tablev-el-table-infinite-scroll="load":data="data":infinite-scroll-disabled="disabled"height="200px"><el-table-column type="index" /><el-table-column prop="date" label="date" /><el-table-column prop="name" label="name" /><el-table-column prop="age" label="age" /></el-table>
</template><script>
const dataTemplate = new Array(10).fill({date: "2009-01-01",name: "Tom",age: "30",
});export default {data() {return {data: [],page: 0,total: 5,};},methods: {load() {if (this.disabled) return;this.page++;if (this.page <= this.total) {this.data = this.data.concat(dataTemplate);}if (this.page === this.total) {this.disabled = true;}},},
};
</script>

六、使用Web Workers处理数据

Web Workers提供了一种将数据处理操作放在后台线程的方法，这样即使处理大量或者复杂的数据，也不会阻塞UI的更新和用户的交互。

在Web Workers中处理数据，前端主线程可以保持高响应性。数据处理完成后，再将结果发送回主线程进行渲染。这对于需要复杂计算处理的大量数据尤为有用。

这里不详细描述

七、借助服务端渲染（SSR）

服务端渲染（SSR）是指在服务器端完成页面的渲染工作，直接向客户端发送渲染后的HTML内容，能显著提升首次加载的速度，对于SEO也非常友好。

虽然SSR不是直接在前端处理大量数据，但它通过减轻前端渲染压力、提前渲染页面内容来间接优化大数据处理的性能问题。结合客户端渲染，可以实现快速首屏加载与动态交互的平衡。

这里不详细描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/38094.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

支付宝支付之收款码支付

支付宝支付之收款码支付

文章目录 收款码支付接入流程安全设计系统交互流程交易状态统一收单交易支付接口请求参数测试结果查询支付撤销支付退款支付退款结果退款说明 收款码支付 继&#xff1a;支付宝支付之入门支付 接入流程 安全设计 支付宝为了保证交易安全采取了一系列安全手段以保证交易安全。…
阅读更多...
账号和权限的管理1

账号和权限的管理1

文章目录 修改用户账号的属性usermod格式常用选项 用户账号的初始化配置文件文件来源主要的用户初始配置文件 组账号文件添加组账号groupadd格式常用选项其他选项 删除组账号groupdel格式 查询账号信息groups格式 id格式 finger格式 W、who、users格式 文件/目录的权限和归属访…
阅读更多...
emptyDir + initContainer实现ConfigMap的动态更新（K8s相关）

emptyDir + initContainer实现ConfigMap的动态更新（K8s相关）

1. 絮絮叨叨 K8s部署服务时&#xff0c;一般都需要使用ConfigMap定义一些配置文件例如&#xff0c;部署分布式SQL引擎Presto&#xff0c;会在ConfigMap中定义coordinator、worker所需的配置文件以node.properties为例&#xff0c;node.environment和node.data-dir的值将由Helm…
阅读更多...
android 通过gradle去除aar的重复资源图片

android 通过gradle去除aar的重复资源图片

背景&#xff1a;项目中引入了aar包&#xff0c;结果导致资源出问题了&#xff0c;于是需要对下面aar包进行重复资源去除操作 操作具体如下&#xff1a; 目录&#xff1a;app/build.gradle 末尾配置 apply from: "${project.rootDir}/scripts/excludewidgetAar.gradle&qu…
阅读更多...
【web】2、集成插件

【web】2、集成插件

1、element-plus 官网地址:设计 | Element Plus 安装 plus 及 icon 图标库 1.1 官网提供plus安装方法&#xff1a; 1.2 官网提供 icon 安装方法 1.3 安装 pnpm install element-plus element-plus/icons-vue main.ts全局安装element-plus,element-plus默认支持语言英语设…
阅读更多...
matlab编辑稀疏单位方阵

matlab编辑稀疏单位方阵

创建 10001000 稀疏单位方阵&#xff0c;并查看稀疏模式。 &#xff08;1&#xff09; I speye(1000); spy(I)&#xff08;2&#xff09; S speye(400,800); spy(S)此命令等同于 speye([400 800])。
阅读更多...
Nginx中封装的数据结构

Nginx中封装的数据结构

Nginx中封装的数据结构 Nginx中封装的数据结构整型ngx_str_t【字符串】ngx_list_t【链表】ngx_table_elt_t【key/value】ngx_buf_tngx_chain_t Nginx中封装的数据结构 整型 typedef intptr_t ngx_int_t; typedef uintptr_t ngx_uint_t;ngx_str_t【字符串】 typ…
阅读更多...
qt6开发环境配置杂记

qt6开发环境配置杂记

很多同学不重视环境配置问题&#xff0c;这是工程问题&#xff0c;实际工作中&#xff0c;如果不真正搞懂环境配置&#xff0c;后期可能会遇到各种坑。 QT是一套开发框架&#xff0c;最终要翻译成c去执行。总体而言&#xff0c;就是下面三张框图&#xff1a; &#xff08;工程…
阅读更多...
Spring底层原理之bean的加载方式一 用XML方式声明bean 自定义bean及加载第三方bean 2024详解

Spring底层原理之bean的加载方式一 用XML方式声明bean 自定义bean及加载第三方bean 2024详解

目录 用XML方式声明bean 首先我们创建一个空的java工程 我们要导入一个spring的依赖 注意在maven工程里瞅一眼 我们创建一个业务层接口 还有四个实现类 我们最初的spingboot生命bean的方式是通过xml声明 我们在resources文件夹下创建一个配置文件 我们书写代码 首先初…
阅读更多...
AI Agent：技术原理与未来趋势

AI Agent：技术原理与未来趋势

在人工智能的快速发展中&#xff0c;AI Agent作为一项创新技术&#xff0c;正逐渐成为研究和应用的热点。AI Agent不仅仅是执行命令的程序&#xff0c;它们能够感知环境、做出决策并采取行动&#xff0c;展现出类似人类的群体协作能力。本文将探讨AI Agent的技术原理、开源框架…
阅读更多...
使用vite官网和vue3官网分别都可以创建vue3项目

使用vite官网和vue3官网分别都可以创建vue3项目

问: npm init vitelatest 和 npm create vuelatest创建的vue3项目有什么区别? 回答: npm init vitelatest 和 npm create vuelatest 分别是使用 Vite 和 Vue CLI 工具创建 Vue 项目的两种方式&#xff0c;它们之间有几个主要区别&#xff1a; 1. **构建工具&#xff1a;** …
阅读更多...
忍法：声音克隆之术

忍法：声音克隆之术

前言&#xff1a; 最近因为一直在给肚子里面的宝宝做故事胎教&#xff0c;每天&#xff08;其实是看自己心情抽空讲下故事&#xff09;都要给宝宝讲故事&#xff0c;心想反正宝宝也看不见我&#xff0c;只听我的声音&#xff0c;干脆偷个懒&#xff0c;克隆自己的声音&#xf…
阅读更多...
Linux CentOS 宝塔 Suhosin禁用php5.6版本eval函数详细图文教程

Linux CentOS 宝塔 Suhosin禁用php5.6版本eval函数详细图文教程

方法一&#xff1a;PHP_diseval_extension禁用 Linux CentOS 禁用php的eval函数详细图文教程_centos php 禁用 eval-CSDN博客 这个方法make报错&#xff0c;懒得费时间处理&#xff0c;直接用第二种 方法二&#xff1a;suhosin禁用 不支持PHP8&#xff0c;官方只支持PHP7以下…
阅读更多...
【电源专题】为什么带电量计芯片的电池MOS保护要放在高侧

【电源专题】为什么带电量计芯片的电池MOS保护要放在高侧

在实际的电量计电池开发中，发现一个很奇怪的现象。传统电池保护IC往往都是将充电保护和放电保护的两个MOS管放在低侧的。如下所示是文章：【电源专题】读一读单节锂电池保护IC规格书 可以看到M1和M2两个MOS管是放在PB-(也就是电池的负端)，我们叫做低端。 而BQ28Z610电…
阅读更多...
目标检测常用涨点方法：注意力机制小结（空间注意力、通道注意力、CBAM等）

目标检测常用涨点方法：注意力机制小结（空间注意力、通道注意力、CBAM等）

1.通道注意力 通道注意力&#xff08;Channel Attention&#xff09;是在通道维度上对输入数据进行学习&#xff0c;再对不同的通道分配相应的权重表示重要性&#xff0c;从而达到“分配注意力”的效果。SENet&#xff08;Squeeze and Excitation networks) 是一个典型的使用通…
阅读更多...
Swift宏的实现

Swift宏的实现

上篇介绍了Swift宏的定义与生声明&#xff0c;本篇主要看看是Swift宏的具体实现。结合Swift中Codable协议&#xff0c;封装一个工具让类或者结构体自动实现Codable协议&#xff0c;并且添加一些协议中没有的功能。 关于Codable协议 Codable很好&#xff0c;但是有一些缺陷&…
阅读更多...
yaklang window安装 vscode运行得到“hello world”

yaklang window安装 vscode运行得到“hello world”

资源来源&#xff1a;旅程伊始&#xff1a;Yak 语言环境安装与搭建环境 | Yak Program Language 安装yak语言非常简单&#xff0c;管理员权限打开命令行运行以下命令&#xff1a; powershell (new-object System.Net.WebClient).DownloadFile(https://yaklang.oss-cn-beijing…
阅读更多...
1085 PAT单位排行（测试点5）

1085 PAT单位排行（测试点5）

solution 测试点5&#xff1a;总分是在每个学生加权后再取整&#xff0c;所以用来存学生分数的变量要用浮点型学校排序&#xff1a; 若成绩不同&#xff0c;则按成绩降序若成绩相同&#xff0c;人数不同&#xff0c;则按成绩升序若成绩和人数都相同&#xff0c;则按单位名升序…
阅读更多...
理解GPT2：无监督学习的多任务语言模型

理解GPT2：无监督学习的多任务语言模型

目录 一、背景与动机 二、卖点与创新 三、几个问题 四、具体是如何做的 1、更多、优质的数据&#xff0c;更大的模型 2、大数据量&#xff0c;大模型使得zero-shot成为可能 3、使用prompt做下游任务 五、一些资料 一、背景与动机 基于 Transformer 解码器的 GPT-1 证明…
阅读更多...
NAS教程丨铁威马如何登录 SSH终端？

NAS教程丨铁威马如何登录 SSH终端？

适用型号&#xff1a; 所有TNAS 型号 如您有特殊操作需要通过 SSH 终端登录 TNAS&#xff0c;请参照以下指引&#xff1a; (注意: 关于以下操作步骤中的"cd /"的指令,其作用是使当前 SSH/Telnet 连接的位置切换到根目录,以免造成对卷的占用.请不要遗漏它.) Windows…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023