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

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

相关文章

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明

Deepseek使用指南与提问优化策略方式

《Deepseek使用指南与提问优化策略方式》本文介绍了DeepSeek语义搜索引擎的核心功能、集成方法及优化提问策略,通过自然语言处理和机器学习提供精准搜索结果,适用于智能客服、知识库检索等领域... 目录序言1. DeepSeek 概述2. DeepSeek 的集成与使用2.1 DeepSeek API

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

Redis的数据过期策略和数据淘汰策略

《Redis的数据过期策略和数据淘汰策略》本文主要介绍了Redis的数据过期策略和数据淘汰策略,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录一、数据过期策略1、惰性删除2、定期删除二、数据淘汰策略1、数据淘汰策略概念2、8种数据淘汰策略

轻松上手MYSQL之JSON函数实现高效数据查询与操作

《轻松上手MYSQL之JSON函数实现高效数据查询与操作》:本文主要介绍轻松上手MYSQL之JSON函数实现高效数据查询与操作的相关资料,MySQL提供了多个JSON函数,用于处理和查询JSON数... 目录一、jsON_EXTRACT 提取指定数据二、JSON_UNQUOTE 取消双引号三、JSON_KE

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

Python给Excel写入数据的四种方法小结

《Python给Excel写入数据的四种方法小结》本文主要介绍了Python给Excel写入数据的四种方法小结,包含openpyxl库、xlsxwriter库、pandas库和win32com库,具有... 目录1. 使用 openpyxl 库2. 使用 xlsxwriter 库3. 使用 pandas 库

Tomcat高效部署与性能优化方式

《Tomcat高效部署与性能优化方式》本文介绍了如何高效部署Tomcat并进行性能优化,以确保Web应用的稳定运行和高效响应,高效部署包括环境准备、安装Tomcat、配置Tomcat、部署应用和启动T... 目录Tomcat高效部署与性能优化一、引言二、Tomcat高效部署三、Tomcat性能优化总结Tom

SpringBoot定制JSON响应数据的实现

《SpringBoot定制JSON响应数据的实现》本文主要介绍了SpringBoot定制JSON响应数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录前言一、如何使用@jsonView这个注解?二、应用场景三、实战案例注解方式编程方式总结 前言