如何优化长列表？

[habc0807]

通常列表分页下拉刷新，会不断的加载新数据，导致页面堆积的节点越来越多，内存不断消耗，可能会出现卡顿的情况，那么该怎么优化呢？

[habc0807]

解决方案采用虚拟列表，减少页面堆积的节点和渲染次数，提高渲染效率；

接口一次性返回2000调数据，前端视图里永远只渲染20条数据。

数据结构设计：

• list: 总数组
• listCache: 缓存展现过的所有列表元素数据（元素高度，距离顶部的高度）
• listTotalHeight: 列表总高度
• listView: 可视区域固定30条数据（元素信息、高度、offset，在原列表中的index等）
• topItemIndex: 可视区域之前的元素个数（用于计算骨架高度，和可视区域的元素取值）

什么是虚拟列表？简单来说就是列表局部渲染。

[Casseil-1996]

思路类似于懒加载+轮播图，看起来好像有很多很多条数据，但实际只有3屏，向下翻页的时候，不断地预加载下一屏，移除上一屏。

[Casseil-1996]

思路类似于懒加载+轮播图，看起来好像有很多很多条数据，但实际只有3屏，向下翻页的时候，不断地预加载下一屏，移除上一屏。