背景
大数据项目根据用户输入代码查询数据,用户的代码不可控(比如select from db limit 5000),有可能一页需求要求展示100行5000列数据。由于是用户代码实时查询的数据,后端不可能将所有查询结果都存储。因此,查询的结果是实时的、全量的,分页和排序都需要前端去实现。
现状
刚开始的接手项目的时候完全不能展示十万级的数量,chrome标签页直接崩溃。这个在分析了需求,展示数据不需要响应式后,用了Object.freeze()后就可以勉强展示十万级数据。虽然还是卡顿,但是需求已经实现。(值得注意的是Object.freeze()并不是深度冻结,实际应用中对象要进行递归操作。)
下面图展示的是100行乘以一千列,在左右拖拽0-150列。目前也对超过两百列的数据进行横向的懒加载操作,实现原理时监听scroll事件滚动到末尾时截取对应下一组数据,然后将滚动条恢复到头部。可以从gif中明显感觉到这个过程是滚动条恢复到原状之间耗时比较长。而且当用户想要看前一组数据的最后一项和后一组数据的前一项时,js就要不停地做截取数据的操作重新渲染,开销非常大。