对于一个长列表,传统做法是采纳懒加载的形式,下拉到底部获取新的内容加载进来,然而随着加载数据越来越多,浏览器的回流和重绘的开销将会越来越大,事个滑动也会造成卡顿,这时候咱们须要用虚构列表解决这样的问题
虚构列表
可视区域:滚动容器元素的视觉可见区域,
可滚动区域:滚动容器元素的外部内容区域
假如有 1000 条数据,每个列表项的高度是 50,哪么可滚动区域的高度就是 1000*50,当用户扭转列表的滚动条的以后滚动值的时候,会造成可视区域的内容的变更,虚构列表就是在解决用户滚动时,次要的目标就是扭转列表在可视区域的渲染局部
具体步骤:
- 先计算以后可见区域起始数据的 startIndex 和以后可见区域完结数据的 endIndex,
- 如果元素的高度是固定的,哪么 startIndex 的算法很简略,等于以后的 scrollTop/itemHeight(滚动条的高度 / 列表项的高度),
- endIndex = startIndex+(clientHieght/itemHeight),
- 再依据 startIndex 和 endIndex 取相应范畴的数据,渲染到可视区域,
- 而后再计算 startOffset 和 endOffset,从图中能够看出 startOffset 和 endOffset 是一个暗藏区域,会撑开容器元素的内容高度,能够起到缓冲的作用,使其放弃滚动的平滑性,还能放弃滚动条处于一个正确的地位,
- 最终成果,不伦怎么滚动,只是扭转滚动条高度地位和元素内容,并没有减少任何多余的元素