vueTable大数据展示优化

背景

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

现状

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

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