每页500条数据的渲染优化思路（1）

每页返回500条的数据，前端一次渲染用户体验很不好，有哪些方式可以友好的解决这个问题。

分批加载

虽然后端返回了500条数据，但是考虑到以下两点我们并不需要一次性展示500条。

• ui上并无法展示500条数据，所以一次性渲染500条也没有必要，用户也许只需要看前面20条；
• 必要时加载，在我们大多数的数据请求以及交互请求中，都是必要时加载，懒加载。那么我们也是这样考虑的。

分批的临界值是多少合适呢

一般情况下我们会设置1.5屏到2屏的数据，用来给用户进行初始展示。这里我们吧后端返回的页面数据与ui的数据分两部分维护。

像百度的图片加载就是每次请求两页的数据，用来给用户体验。

let pageData = [] //len 500
let uiData = [] //len 20
复制代码

写一个loadUiData 以及loadPageData 的方法

既然假定了用户是基于滚动加载得到更多数据的，那么我们需要两个方法，分别获取ui展示的数据，以及每个页面的数据，uiData作为累加值。

每次滚动加载时调用loadUiData,使得uiData.concat(pageData[20,40]),然后记录页数和总数据数，当发现ui的数据已经把当前请求的数据都加载完时，请求新的页面数据（以及loadPageData），然后再调用追加页面数据的一页数量。

加载的时机

刚才讲到分批加载，那么作为分批加载时，一般情况是加载1.5屏或者两屏的数据，当我们发现我们的最后一条数据距离视口还有0.5或者0.3屏时会自动加载，这种是属于隐性无感知的加载；还有一种是明显感知的，是用户距离底部30-50px时，有底部加载的动画或者全屏加载的动画，然后看到新的数据渲染出。

当然也有的站点是滚动到屏幕底部然后再请求数据的。

滚动优化一

我们追加scroll的事件监听，发现其会滚动很多次，重复触发加载事件，对于这样的事件触发我们要加节流或者防抖。控制请求频率。

另外需要注意的时，需要判断当前数据的渲染情况以及滚动情况，在数据没有完全渲染完，用户的滚动条位置还没有到齐位置时，是没有必要加载新的数据的。

要切实的保证，用户的所有加载好的数据展示部分拉到了底部，并且触发了操作，才请求数据，已经在请求数据的过程中不要重复请求。

另外，如果我们的加载数据方法性能不是很好，建议针对自己的用户体验提升方面可以定义自己的滚动监听时机和每次加载的数量，具体衡量是查看一次通讯代价高还是查询大量数据代价高。