页面数据量较大有一万条数据,怎么优化

当前端页面有大量数据10000+条数据时,性能处理个人感觉应该考虑两个方面:

1、一次性将10000条数据请求回来很耗时;2、将这10000条数据渲染到页面上时很耗时;

场景1:有一个下拉列表,有10000条下拉选项,怎么优化?

(1)个人首先想到的是懒渲染,常见的便是无线滚动,基本前端流行的框架中都有对应的组件,采用滚动监听的原理,当底部一个空DIV进入视口后请求接口数据,可以每次请求10条,然后渲染

(2)虚拟列表:也就是可视区域渲染方式,通过只渲染可视区域内的元素,当页面滚动时渲染可见的,删除不可见的,减少DOM操作和渲染次数;vue3中便有一个virtual-scroller组件,虚拟列表的实现也很简单:

思路就是用vue的for循环渲染列表，自己手动加一个滚动条，然后通过监听scroll，算出应该显示到第几个，通过计算属性截取显示的数据—如下图:

3、当真实的项目中,下拉列表确实数据量很大时,我们也可加入搜素功能,方便快速筛选到数据

场景2:当一个页面上确实需要同时显出10000+条数据时,例如股票的曲线图:这时需要考虑到这10000+条数据一次性请求回来很耗时,渲染上去也很耗时: 解决方案:

(1) axios分批次请求,可以手写一个限制并发请求个数的函数(基于Promise.all)实现分批次请求,当第一批次的请求结果拿到之后再发送第二批次的请求;页面渲染数据时,类似于精度条,可以配合前端动画做出一个好看的效果.

(2)以股票曲线图为例,我们可以只请求关键点的数据,将曲线的总体轮廓显现出来,当我们鼠标进入或者点击某个区间想查看具体细节走势时,在请求此区间段内的详细数据;