前端列表数据太多导致页面卡顿就这么处理

前端列表数据太多页面卡顿就这么处理

实际场景

首先看以下两个实际场景：

场景一：有一个数据列表，数据量非常大且每一个数据项都有几十列甚至更多，且后端未做分页，一次将所有的数据返回到前端，此时全部渲染用户需要等待很长时间才能看到页面，甚至用户的滑动操作都会比较卡。
场景二：同样有一个数据量非常大的数据列表，后端做了分页，前端一次请求

50

条数据，页面首次渲染非常快，上拉加载也很流畅。随着用户一直上拉加载，页面上的

dom

越来越多，逐渐的上拉加载就变得卡顿了。

在以上两个场景中就是我们平时所说的长列表无法避免的问题，主要原因是页面中的

dom

太多导致渲染卡顿。目前最优的方案是虚拟列表

什么是虚拟列表

概念：虚拟列表是一种优化长列表加载性能的技术，通过只渲染用户当前可见的元素，极大地提高了用户体验和应用性能。

虚拟列表实现原理

虚拟列表的实现原理主要是对列表的可视区域进行渲染，而对非可见区域不渲染或部分渲染。

1. 首先需要准备两个数据源 - 第一个是原始数据源，用于存放所有的应该渲染到页面上的数据- 第二个是部分数据源，用于存放要渲染到可视区域和部分不可视区域的数据，以下是部分数据源生成方式： > 部分数据源依赖原始数据源和当前可视区域生成，假设我们期望页面最多渲染> > 100> > 条实际数据首次渲染时，我们对原始数据进行遍历> > > 1. 若原始数据源长度小于100条，则原始数据源全部加到部分数据源数组中> 2. 若原始数据源长度大于100条，则原始数据源中前100条数据加入到部分数据源中，第100条以后的数据以 {} 的形式加入到部分数据源中。> > > - 特别说明：部分数据源中添加 {}目的时为了占位，即页面中虽然不渲染此条数据，但依然占据位置
2. 监听页面滚动事件，更改部分数据源 - 设置监听事件window.removeEventListener('scroll', handleScroll); （注意：若使用前端框架或组件库，设置监听事件的方式可以不同，依据实际的事件监听添加方式设置监听事件）- 在监听事件 handleScroll 中更新部分数据源 > 根据滚动的位置，更新部分数据源中的值> > > 1. 通过事件对象的scrollTop属性获取当前滚动的位置> 2. 假设每条数据都是同样的高度，获取到一条的高度 itemHeight，则用scrollTop/itemHeight 获取到当前可视区域滚动的位置第index个> 3. 遍历原始数据源，若当前数据在 index-50 ~ index+50 之间，则将此条数据加入到部分数据源中，否则，将{}加入到部分数据源中占位
3. 将部分数据源遍历渲染到页面上

实战中虚拟列表的问题及相应解决方案

页面滑动过快可能会有白屏问题，在此仅提供一个思路：可使用骨架屏的方案处理