虚拟列表

对于一个长列表，传统做法是采用懒加载的方式，下拉到底部获取新的内容加载进来，但是随着加载数据越来越多，浏览器的回流和重绘的开销将会越来越大，事个滑动也会造成卡顿，这时候我们需要用虚拟列表解决这样的问题

虚拟列表

可视区域：滚动容器元素的视觉可见区域，
可滚动区域：滚动容器元素的内部内容区域

假设有1000条数据，每个列表项的高度是50，哪么可滚动区域的高度就是1000*50，当用户改变列表的滚动条的当前滚动值的时候，会造成可视区域的内容的变更，虚拟列表就是在处理用户滚动时，主要的目的就是改变列表在可视区域的渲染部分

具体步骤：

1. 先计算当前可见区域起始数据的startIndex和当前可见区域结束数据的endIndex,
2. 假如元素的高度是固定的，哪么startIndex的算法很简单，等于当前的scrollTop/itemHeight(滚动条的高度/列表项的高度)，
3. endIndex = startIndex+(clientHieght/itemHeight)，
4. 再根据startIndex和endIndex取相应范围的数据，渲染到可视区域，
5. 然后再计算startOffset和endOffset，从图中可以看出startOffset和endOffset是一个隐藏区域，会撑开容器元素的内容高度，可以起到缓冲的作用，使其保持滚动的平滑性，还能保持滚动条处于一个正确的位置，
6. 最终效果，不伦怎么滚动，只是改变滚动条高度位置和元素内容，并没有增加任何多余的元素