js前端展示大数据量数据的进阶操作

之前这个项目没优化完,就投入到下个项目中去 /(ㄒoㄒ)/~~,不得已鸽了。。。


接上一篇:js前端对于大量数据的展示方式及处理
参考:js 大量数据优化,通用方法

进阶操作就是只渲染视口元素,以及把计算过程放在Web Worker多线程执行
本项目并无对数据作大量计算的需求,所以其他地方暂时用不到Web Worker。
我准备从以下两种方式来实现非视口元素不展示

  • 简单一些:一种是元素本身用占位框来代替,即本来是有内容的卡片,现在用无内容同等大小的空div来代替
  • 复杂一些:元素本身也删掉,用padding来保证滚动距离。

因为我的展示方式本身就是比较复杂的,除了数据项还有时间点,在考虑滚动距离的时候也要把时间点的高度考虑进去,先从简单的来,我就先尝试把元素用占位div代替。

解决过程:

方式一:元素用占位div代替——监听事件触发

从实现图片懒加载的全局事件触发中得到启发,数据项替换也可以类似。
把数据项卡片提取为组件

// ResultItem.vue


                    
                    

你可能感兴趣的:(js前端展示大数据量数据的进阶操作)