渲染大量数据显示的优化

在最近的项目中遇到一些大数据渲染问题,在渲染时候变得非常卡,有时候页面还会造成崩溃的显现,vue渲染小数据挺快,大数据vue开始出现卡顿现象,vue 中的虚拟DOM也不行,这对于我们大数据公司来说,无疑是非常头疼的地方,对于前端来的我们来说,无疑影响是最大的。

业务背景:

在数据脱敏的过程中,前端需要展示数据中每个表的一个脱敏过程,包括每个表的从创建,脱敏等等,在数据库表非常多的情况下,过程信息将近到几万条过程信息。
在这里插入图片描述

主要问题

  1. 按照原来的做法,普通的组件,进行数据渲染插入dom中(几十条邹游),数据量小的时候很正常,vue很快。
  2. 改为分段实现,把一批数据进行分块,通过定时器取出相应的部分去渲染,这种做法,比第一中稍微好点
  3. 改为分段+虚拟DOM实现,这种做法,当达到几百条就会出现问题。

解决思路

  1. 不要渲染全部数据,只渲染用户眼睛能看到的部分数据。
  2. 不要用Vue去管理和监听全部的数据,造成很大的内存开销,可以自己定义个变量计算。

欢迎进入个人公众号 ,一起学习啊!

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐