【前端】处理一次性十万条数据渲染方案(不考虑后端分页)
文章目录
- 一、定时渲染
- 二、触底加载
一、定时渲染
- 思路:定时加载,分堆处理
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;
}
相关文章:
【前端】处理一次性十万条数据渲染方案(不考虑后端分页)
文章目录 一、定时渲染二、触底加载 一、定时渲染 思路:定时加载,分堆处理 1. 例如,前端请求到十五条数据以后,先不直接渲染,而是将这些数据分堆分批次渲染 2. 比如,一堆放10条数据,十万条数据…...
WPS 云文档保存在本地的地址如何从c盘更改为其他盘?
程序代码园发文地址:WPS 云文档保存在本地的地址如何从c盘更改为其他盘?-程序代码园小说,Java,HTML,Java小工具,程序代码园,http://www.byqws.com/ ,WPS 云文档保存在本地的地址如何从c盘更改为其他盘?http://www.byqws.com/blog/3146.html?…...
每日leetcode--接雨水
引言 接雨水问题是一个经典的算法问题,它要求我们计算给定一组不同高度的墙壁时,这些墙壁之间能够蓄积多少雨水。解决这个问题的方法有很多,其中一种常见的解法是通过辅助数组来记录每个位置的左右最大高度,并计算每个位置上方能…...
redis 性能优化一
目录 前言 尾延迟 前言 说到redis 性能优化,优化的目的是什么?提高响应,减少延迟。就要关注两点,一是尾延迟,二是Redis 的基线性能。只有指标,我们的优化,才有意义,才能做监控以及…...
柔性数组(变长数组)介绍
柔性数组简介 柔性数组,或称为可变长度数组,是一种在C语言结构体定义中使用的特殊数组,它允许结构体拥有一个可变大小的数组成员。柔性数组成员必须是结构体的最后一个成员,且它不占用结构体大小的计算,这使得可以动态…...
AMS、PMS和WMS学习链接
原文: Framework学习(三)之PMS、AMS、WMS_ams pms-CSDN博客 1:PackageMangerService(PMS)讲解博主 PMS系列我觉得csdn博主jeanboy讲的非常好,这里附上博主的博客链接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.造测试数据:根据测试需要,自动化构造各业务场景的中登清算数据与清算所需起来数据 2.测试清算系统功能: 自动化测试方案 工具设计 工具框架图 工具流程图 实现技术 python, pytest, allure, 多进程,mysql, 前端 效果 测…...
土地利用数据分类过程教学/土地利用分类/遥感解译/土地利用获取来源介绍/地理数据获取
本篇主要介绍如何对影像数据进行分类解译,及过程教学,示例数据下载链接:数据下载链接 一、背景介绍 土地是人类赖以生存与发展的重要资源和物质保障,在“人口-资源-环境-发展&#x…...
图【数据结构】
文章目录 图的基本概念邻接矩阵邻接表图的遍历BFSDFS 图的基本概念 图是由顶点集合及顶点间的关系组成的一种数据结构 顶点和边:图中结点称为顶点 权值:边附带的数据信息 路径 : 简单路径 和 回路: 子图:设图G {V, E}和图G1…...
整块代码自动生成、智能括号匹配……CodeGeeX编程提效,功能再升级!
CodeGeeX插件功能持续打磨,希望成为开发者更高效的智能编程工具,提高开发速度和代码质量。今天介绍VSCode中最新的v2.4.0版本插件新功能,让你在编写代码时更加得心应手。 一、新增block代码块生成的设置 CodeGeeX插件中,以往针对…...
java实现计算ROUGE-L指标(一)
ROUGE (Recall-Oriented Understudy for Gisting Evaluation) 是用于评估自动文摘或机器翻译的一种评估方法,其中的ROUGE-L指标是基于最长公共子序列(Longest Common Subsequence,LCS)来计算的 我们做AI问答系统,需要一…...
LLM之RAG实战(二十九)| 探索RAG PDF解析
对于RAG来说,从文档中提取信息是一种不可避免的场景,确保从源文件中提取出有效的内容对于提高最终输出的质量至关重要。 文件解析过程在RAG中的位置如图1所示: 在实际工作中,非结构化数据比结构化数据丰富得多。如果这些海量数据无…...
C while 和 do while 区别
while 和 do while 都是 C 语言中的循环语句,它们的主要区别在于循环体执行的顺序。 while 循环首先检查循环条件,只有当条件为真时才执行循环体。因此,如果条件一开始就为假,那么循环体将永远不会执行。而如果条件一直为真&…...
力扣每日一题 在受污染的二叉树中查找元素 哈希 DFS 二进制
Problem: 1261. 在受污染的二叉树中查找元素 思路 👨🏫 灵神题解 💖 二进制 时间复杂度:初始化为 O ( 1 ) O(1) O(1);find 为 O ( m i n ( h , l o g 2 t a r g e t ) O(min(h,log_2target) O(min(h,log2targ…...
安卓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根目录,将交叉编译好的sail中的build_soc拷贝至soc-sdk文件夹内; 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、进程间通信目的 数据传输:一个进程需要将它的数据发送给另一个进程;资源共享:多个进程之间共享同样的资源;通知事件:一个进程需要向另一个或一组进程发送消息,通知它(…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...
stm32wle5 lpuart DMA数据不接收
配置波特率9600时,需要使用外部低速晶振...
Linux 下 DMA 内存映射浅析
序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存,但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程,可以参考这篇文章,我觉得写的非常…...
