当前位置:首页 » 《资源分享》 » 正文

【前端】处理一次性十万条数据渲染方案(不考虑后端分页)

22 人参与  2024年04月30日 12:13  分类 : 《资源分享》  评论

点击全文阅读


文章目录

一、定时渲染二、触底加载

一、定时渲染

思路:定时加载,分堆处理
1. 例如,前端请求到十五条数据以后,先不直接渲染,而是将这些数据分堆分批次渲染2. 比如,一堆放10条数据,十万条数据就是一万堆3. 然后使用定时器一次渲染一堆,渲染一万次即可
核心实现
// 渲染到页面表格的数据let pagedata = [];const plan = async () => {// 例如 bigdata 是接口请求到的十万条数据const bigdata = await getBigDat();// 分堆处理let arr = average(bigdata)// 渲染数据for(let i=0; i<arr.length; i++){setTimeout(()=>{pagedata = [...pagedata, ...arr[i]]},20*i)}}const average = (arr) => {let i = 0;let res = [];while(i < arr.length){// 一堆截取10条数据res.push(arr.slice(i, i+10));i = i+10;}return res;}
优化掉帧:requestAnimationFrame

由于定时器设置了间隔时间,当数据滚动较快,会导致页面渲染跟不上,从而出现掉帧现象

// 渲染到页面表格的数据let pagedata = [];const plan = async () => {// 例如 bigdata 是接口请求到的十万条数据const bigdata = await getBigDat();// 分堆处理let arr = average(bigdata)// 渲染数据useData(0);}const useData = (index)=>{if(index > arr.length -1){return}// 用动画请求帧优化requestAnimationFrame(()=>{pagedata = [...pagedata, ...arr[index]]index = index + 1;// 递归调用useData(index)})}const average = (arr) => {let i = 0;let res = [];while(i < arr.length){// 一堆截取10条数据res.push(arr.slice(i, i+10));i = i+10;}return res;}

二、触底加载

在vue中需要使用到饿了么的一个插件包el-table-infinite-scroll【官方文档】

安装插件

npm install --save el-table-infinite-scroll
引用插件
import Vue from 'vue';import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll)
使用插件
<el-table:data="tabledata"    v-el-table-infinite-scroll="load"></el-table>
核心代码
// 渲染到页面表格的原始数据let pagedata = [];// 渲染到页面表格的实时数据let tabledata = [];const plan = async () => {// 例如 bigdata 是接口请求到的十万条数据const bigdata = await getBigDat();// 分堆处理pagedata = average(bigdata)// 渲染数据load()}const load = (arr) => {if(pagedata.length === 0){return;}// 加载的时候,把pagedata数组的第一项取出来,拼接到展示的表格数据上let arr = pagedata[0]tabledata = tabledata.concat(arr);// 拼接完成后,再把pagedata数组的第一项删除即可pagedata.shift()}const average = (arr) => {let i = 0;let res = [];while(i < arr.length){// 一堆截取10条数据res.push(arr.slice(i, i+10));i = i+10;}return res;}

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/102328.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 穿越星海说爱你:结局+番外,林雪羽梁淮序列表_穿越星海说爱你:结局+番外,林雪羽梁淮序
  • 「重生后,我和老公双双悔婚」后续已完结_「陆知归明星温欣柔」章节分享
  • 轻弹一首别离梁慕白苏洛沈亦琛番外霜珑
  • 全文穿越星海说爱你:结局+番外免费品鉴(林雪羽梁淮序)列表_全文穿越星海说爱你:结局+番外免费品鉴
  • 医心向唐:情定盛世结局+番外林悦唐玄宗完本_医心向唐:情定盛世结局+番外(林悦唐玄宗)
  • 穿越星海说爱你:结局+番外言情作品(林雪羽梁淮序)_穿越星海说爱你:结局+番外言情作品林雪羽梁淮序
  • 幽思燃烬忘川路笔趣阁全书叶墨谨幽璃迟少瑜在线
  • 错的时光,对的你何欢池完本_错的时光,对的你(何欢池)
  • 奔赴死亡的爱恋情感冲突精选段落_「林宇默默苏念」小说后续在线免费阅读
  • 叶摘星许砚寒沈念欢彩蛋(又名:梦里灯火不渡我)全书免费叶摘星许砚寒沈念欢彩蛋(又名:梦里灯火不渡我)全书免费
  • 雁字回时情未休秦桑谢亦完本_完本雁字回时情未休秦桑谢亦
  • 老公直播将我送上罪犯的床我离开他却后悔了(又名:老公直播将我送上罪犯的床我离开他却后悔了)(乔亦安段行琛林知意)全书免费_(乔亦安段行琛林知意)老公直播将我送上罪犯的床我离开他却后悔了(又名:老公直播将我送上罪犯的床我离开他却后悔了)后续(乔亦安段行琛林知意)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1