渲染大量数据显示的优化

渲染大量数据显示的优化

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

业务背景：

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

主要问题

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

解决思路

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

欢迎进入个人公众号 ，一起学习啊！