当前位置: 首页 > news >正文

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

文章目录

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

一、定时渲染

  • 思路:定时加载,分堆处理
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;
}

相关文章:

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

文章目录 一、定时渲染二、触底加载 一、定时渲染 思路&#xff1a;定时加载&#xff0c;分堆处理 1. 例如&#xff0c;前端请求到十五条数据以后&#xff0c;先不直接渲染&#xff0c;而是将这些数据分堆分批次渲染 2. 比如&#xff0c;一堆放10条数据&#xff0c;十万条数据…...

WPS 云文档保存在本地的地址如何从c盘更改为其他盘?

程序代码园发文地址&#xff1a;WPS 云文档保存在本地的地址如何从c盘更改为其他盘&#xff1f;-程序代码园小说,Java,HTML,Java小工具,程序代码园,http://www.byqws.com/ ,WPS 云文档保存在本地的地址如何从c盘更改为其他盘&#xff1f;http://www.byqws.com/blog/3146.html?…...

每日leetcode--接雨水

引言 接雨水问题是一个经典的算法问题&#xff0c;它要求我们计算给定一组不同高度的墙壁时&#xff0c;这些墙壁之间能够蓄积多少雨水。解决这个问题的方法有很多&#xff0c;其中一种常见的解法是通过辅助数组来记录每个位置的左右最大高度&#xff0c;并计算每个位置上方能…...

redis 性能优化一

目录 前言 尾延迟 前言 说到redis 性能优化&#xff0c;优化的目的是什么&#xff1f;提高响应&#xff0c;减少延迟。就要关注两点&#xff0c;一是尾延迟&#xff0c;二是Redis 的基线性能。只有指标&#xff0c;我们的优化&#xff0c;才有意义&#xff0c;才能做监控以及…...

柔性数组(变长数组)介绍

柔性数组简介 柔性数组&#xff0c;或称为可变长度数组&#xff0c;是一种在C语言结构体定义中使用的特殊数组&#xff0c;它允许结构体拥有一个可变大小的数组成员。柔性数组成员必须是结构体的最后一个成员&#xff0c;且它不占用结构体大小的计算&#xff0c;这使得可以动态…...

AMS、PMS和WMS学习链接

原文: Framework学习&#xff08;三&#xff09;之PMS、AMS、WMS_ams pms-CSDN博客 1:PackageMangerService&#xff08;PMS&#xff09;讲解博主 PMS系列我觉得csdn博主jeanboy讲的非常好&#xff0c;这里附上博主的博客链接jeanboy。这是一位资深级的博客专家。关于他PMS的讲…...

typedef 在枚举类型enum的使用方式

enum类型用途:为程序中的一组相关的常量取名字,以便以程序的可读性和维护性 方式一:typedef enum 变量名{E_XXXXX = 0,E_xxxx,E_XXXX_MAX }变量名_e; 方式二: typedef enum {E_xxxx = 0,E_xxxx,E_xxx_MAX}变量名_e;#include <stdio.h> typedef enum vii_vpp_mode {E_…...

DDD领域模型驱动

传统MVC架构 DDD架构: api层:api请求方式,透传【传递参数】,几个业务对应api 业务层:做编排,业务里要有哪些服务,执行顺序是什么,以及怎么做 领域层:负责领域内调用,然后领域怎么划分 Dao层:数据库操作【或者另外一个应用 数据源之类的】 遵守原则: ①允许跨层…...

基于pytest的证券清算系统功能测试工具开发

需求 1.造测试数据&#xff1a;根据测试需要&#xff0c;自动化构造各业务场景的中登清算数据与清算所需起来数据 2.测试清算系统功能&#xff1a; 自动化测试方案 工具设计 工具框架图 工具流程图 实现技术 python, pytest, allure, 多进程&#xff0c;mysql, 前端 效果 测…...

土地利用数据分类过程教学/土地利用分类/遥感解译/土地利用获取来源介绍/地理数据获取

本篇主要介绍如何对影像数据进行分类解译&#xff0c;及过程教学&#xff0c;示例数据下载链接&#xff1a;数据下载链接 一、背景介绍 土地是人类赖以生存与发展的重要资源和物质保障&#xff0c;在“人口&#xff0d;资源&#xff0d;环境&#xff0d;发展&#x…...

图【数据结构】

文章目录 图的基本概念邻接矩阵邻接表图的遍历BFSDFS 图的基本概念 图是由顶点集合及顶点间的关系组成的一种数据结构 顶点和边&#xff1a;图中结点称为顶点 权值:边附带的数据信息 路径 &#xff1a; 简单路径 和 回路&#xff1a; 子图&#xff1a;设图G {V, E}和图G1…...

整块代码自动生成、智能括号匹配……CodeGeeX编程提效,功能再升级!

CodeGeeX插件功能持续打磨&#xff0c;希望成为开发者更高效的智能编程工具&#xff0c;提高开发速度和代码质量。今天介绍VSCode中最新的v2.4.0版本插件新功能&#xff0c;让你在编写代码时更加得心应手。 一、新增block代码块生成的设置 CodeGeeX插件中&#xff0c;以往针对…...

java实现计算ROUGE-L指标(一)

ROUGE (Recall-Oriented Understudy for Gisting Evaluation) 是用于评估自动文摘或机器翻译的一种评估方法&#xff0c;其中的ROUGE-L指标是基于最长公共子序列&#xff08;Longest Common Subsequence&#xff0c;LCS&#xff09;来计算的 我们做AI问答系统&#xff0c;需要一…...

LLM之RAG实战(二十九)| 探索RAG PDF解析

对于RAG来说&#xff0c;从文档中提取信息是一种不可避免的场景&#xff0c;确保从源文件中提取出有效的内容对于提高最终输出的质量至关重要。 文件解析过程在RAG中的位置如图1所示&#xff1a; 在实际工作中&#xff0c;非结构化数据比结构化数据丰富得多。如果这些海量数据无…...

C while 和 do while 区别

while 和 do while 都是 C 语言中的循环语句&#xff0c;它们的主要区别在于循环体执行的顺序。 while 循环首先检查循环条件&#xff0c;只有当条件为真时才执行循环体。因此&#xff0c;如果条件一开始就为假&#xff0c;那么循环体将永远不会执行。而如果条件一直为真&…...

力扣每日一题 在受污染的二叉树中查找元素 哈希 DFS 二进制

Problem: 1261. 在受污染的二叉树中查找元素 思路 &#x1f468;‍&#x1f3eb; 灵神题解 &#x1f496; 二进制 时间复杂度&#xff1a;初始化为 O ( 1 ) O(1) O(1)&#xff1b;find 为 O ( m i n ( h , l o g 2 t a r g e t ) O(min(h,log_2target) O(min(h,log2​targ…...

安卓Java面试题 91- 100

91. 请描述一下Intent 和 IntentFilter ?Intent是组件的通讯使者,可以在组件间传递消息和数据。 IntentFilter是intent的筛选器,可以对intent的action,data,catgory,uri这些属性进行筛选,确定符合的目标组件🚀🚀🚀🚀🚀🚀92. 阐述什么是IntentService?有何优…...

BM1684X搭建sophon c++环境

1:首先安装编译好sophon-sail 比特大陆BM1684X开发环境搭建--SOC mode-CSDN博客 2:在将之前配置的soc-sdk拷贝一份到sdk根目录&#xff0c;将交叉编译好的sail中的build_soc拷贝至soc-sdk文件夹内&#xff1b; cp -rf build_soc/sophon-sail/inlcude soc-sdk cp -rf build_soc…...

UDP通讯测试

参考资料:UNIX网络编程 实验平台:PC为client,RaspberryPi为server 基本类型和接口函数,参考man手册 #include <sys/socket.h>struct sockaddr {sa_family_t sa_family; /* Address family */char sa_data[]; /* Socket address */};#inclu…...

Linux - 进程间通信

1、进程间通信介绍 1.1、进程间通信目的 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程&#xff1b;资源共享&#xff1a;多个进程之间共享同样的资源&#xff1b;通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它&#xff08;…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...