区别 #

懒加载： #

常见场景，滚动底部加载新的数据，缺点很明显，用户不能得知总数据量的高度，不能快速滚动

虚拟滚动： #

常见场景，只渲染可视区域的dom，用户进行滚动时js判断相应的数据，进行可视区域dom的更新，原理就是js运行速度远快于dom渲染的速度，用js的时间换dom渲染的时

html渲染成千上万的dom会导致浏览器卡顿乃至卡死，虚拟滚动就是解决方案之一 页面只需要渲染可视区域的dom，当用户进行滚动时根据滚动高度进行可视区域dom的更新，从而达到无感滚动效果

思路：

• 根据数据条数计算相应高度，使用dom占位，从而生成相应高度滚动列表，用户可以自由滚动
• 监听滚动列表的scroll事件
• 根据scrollTop进行slice数组，取出相应下标数据
• 根据scrollTop值控制虚拟列表偏移，使其始终在用户可视区域内
• 上下需要预留一些dom，避免用户滚动过快出现白屏
• 使用fixed，absolute，transform避免页面回流