当前位置:   article > 正文

vueTable大数据展示优化

vue-table 80w数据

背景

clipboard.png
大数据项目根据用户输入代码查询数据,用户的代码不可控(比如select from db limit 5000),有可能一页需求要求展示100行5000列数据。由于是用户代码实时查询的数据,后端不可能将所有查询结果都存储。因此,查询的结果是实时的、全量的,分页和排序都需要前端去实现

现状

刚开始的接手项目的时候完全不能展示十万级的数量,chrome标签页直接崩溃。这个在分析了需求,展示数据不需要响应式后,用了Object.freeze()后就可以勉强展示十万级数据。虽然还是卡顿,但是需求已经实现。(值得注意的是Object.freeze()并不是深度冻结,实际应用中对象要进行递归操作。)

下面图展示的是100行乘以一千列,在左右拖拽0-150列。目前也对超过两百列的数据进行横向的懒加载操作,实现原理时监听scroll事件滚动到末尾时截取对应下一组数据,然后将滚动条恢复到头部。可以从gif中明显感觉到这个过程是滚动条恢复到原状之间耗时比较长。而且当用户想要看前一组数据的最后一项和后一组数据的前一项时,js就要不停地做截取数据的操作重新渲染,开销非常大。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/人工智能uu/article/detail/858651
推荐阅读
相关标签
  

闽ICP备14008679号