场景引入

为什么需要用到高性能虚拟列表+节流+分页请求的优化？

当有场景需求为需要将大量数据(10000条)呈现在一页上，我们不断下拉访问，页面中有大量的数据列表的时候，用户会不会有不好的体验？会不会出现滚动不流畅而卡顿的情况？会不会因卡顿而出现短暂的白屏现象(数据渲染不成功)？

通过微信开发者工具自带的调试器->Network页面，我们可以观察到当有长列表时如果不使用高性能虚拟列表+节流+分页请求的优化，会出现以下问题：

1. FPS：每秒帧数，图表上的红色块表示长时间帧，很可能会出现卡顿。
2. CPU：CPU消耗占用，实体图越多消耗越高。
3. NET：网络请求效率低，一次性请求10000条的渲染效率远远低于分1000次，每次请求10条数据
4. 内存：滑动该列表时明显能看到内存消耗大。

总结：如果需要将大量数据(10000条)呈现在一页上，可以通过高性能虚拟列表+节流+按需请求分页数据并追加显示。

优化的具体实现可拆分为以下需求(将一个大问题拆分为一个个小问题并逐个去解决)：

1. 不把长列表数据一次性全部直接显示在页面上。
2. 截取长列表一部分数据用来填充屏幕容器区域。
3. 长列表数据不可视部分使用使用空白占位填充。
4. 监听滚动事件根据滚动位置动态改变可视列表。
5. 监听滚动事件根据滚动位置动态改变空白填充。
6. 分页从服务器请求数据，将一次性请求所有数据变为滚动到底部才再次向服务器发送获取数据的请求

更详细的实现方法请阅读我的下一篇文章：https://developers.weixin.qq.com/community/develop/article/doc/000a2618d34908e3610d5978856c13