前端加载,渲染十万条数据(性能优化)

2024-06-03 17:04

本文主要是介绍前端加载,渲染十万条数据(性能优化),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.场景

项目中某个弹窗展示设备信息卡片,返回的设备信息很多,页面样式有很花哨,导致渲染极其缓慢
f12,查看性能,这里可以看到页面加载在哪一步分耗时最长,针对性进行优化(图为举例)
在这里插入图片描述

2.解决思路

采用虚拟列表的方式,滚动时,dom元素数量不变,只改变展示的数据
结构描述:
父盒子A,添加滚动事件
子盒子B,用于模拟滚动条长度,高度设为单条展示信息盒子的高度×子盒子的数量
子盒子C,信息展示的载体,里面是一定数量的单条展示信息盒子,子盒子C相对于父盒子A绝对定位,每次滚动时修改偏移量,保证信息显示在父盒子A的视口,不随滚动卷到其他地方

3.代码演示

<template><div class="container"><div class="showWinsow" ref="showWinsow" :style="{ '--rowHeight': rowHeight + 'px' }" @scroll="scrollEvent"><!-- 子元素超出父元素的高度 --><div class="scrollBox" ref="scrollBox"></div><!-- 数据列表 --><div class="itemBox" ref="itemBox"><div class="item" v-for="item in showList" :key="item">{{ item.n }}</div></div></div></div>
</template>
<script>
const propsData_bigList = new Array(100000).fill(null).map((e, i) => ({ n: (i + 1) }))//模拟传入本组件的超大数据
export default {data() {return {list: Object.freeze(propsData_bigList),//冻结数据,优化性能,//接收传入本组件的超大数据offsetValue: '',//滚动的距离startIndex: 0,//列表展示的开始索引endIndex: 20,//列表展示的结束索引viewCount: 20,//传入的行数rowHeight: 20//传入的行高}},created() {},mounted() {this.$refs.showWinsow.style.height = (this.viewCount * this.rowHeight) + 'px'this.$refs.scrollBox.style.height = (this.rowHeight * this.list.length) + 'px'},computed: {showList() {return this.list.slice(this.startIndex, this.endIndex)}},methods: {//滚动处理逻辑scrollEvent() {this.offsetValue = Math.round(this.$refs.showWinsow.scrollTop)console.log(this.offsetValue, '当前滚动偏移值');this.startIndex = Math.round(this.offsetValue / this.rowHeight)this.endIndex = this.startIndex + this.viewCountthis.$refs.itemBox.style.transform = `translateY(${this.offsetValue}px)`}}
}
</script>
<style scoped>
.container {width: 100%;height: 100%;overflow: hidden;
}.showWinsow {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50%;overflow-y: auto;background-color: skyblue;border: 1px solid red;
}.scrollBox {}.itemBox {position: absolute;left: 0;top: 0;width: 100%;
}.item {height: var(--rowHeight);background-color: pink;border-bottom: 1px solid red;
}
</style>

这篇关于前端加载,渲染十万条数据(性能优化)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1027583

相关文章

Zabbix在MySQL性能监控方面的运用及最佳实践记录

《Zabbix在MySQL性能监控方面的运用及最佳实践记录》Zabbix通过自定义脚本和内置模板监控MySQL核心指标(连接、查询、资源、复制),支持自动发现多实例及告警通知,结合可视化仪表盘,可有效... 目录一、核心监控指标及配置1. 关键监控指标示例2. 配置方法二、自动发现与多实例管理1. 实践步骤

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

Linux进程CPU绑定优化与实践过程

《Linux进程CPU绑定优化与实践过程》Linux支持进程绑定至特定CPU核心,通过sched_setaffinity系统调用和taskset工具实现,优化缓存效率与上下文切换,提升多核计算性能,适... 目录1. 多核处理器及并行计算概念1.1 多核处理器架构概述1.2 并行计算的含义及重要性1.3 并

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则:依赖驱动加载手动控制 Bean 加载顺序的方法方法 1:使用@DependsOn(最直

Linux系统性能检测命令详解

《Linux系统性能检测命令详解》本文介绍了Linux系统常用的监控命令(如top、vmstat、iostat、htop等)及其参数功能,涵盖进程状态、内存使用、磁盘I/O、系统负载等多维度资源监控,... 目录toppsuptimevmstatIOStatiotopslabtophtopdstatnmon

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核