前端性能优化实现列表虚拟滚动

前端如何实现虚拟滚动

最近项目列表数据越来越多,每次都要加载所有的性能不好的浏览器特别卡顿.前端有一个虚拟滚动的技术可以优化列表,所以特别研究了一下

图示:


前端性能优化实现列表虚拟滚动_第1张图片
根据上述图示,可以理解为虚拟滚动就是三个盒子外层为视窗, 中间层为整个数据列表的高度盒子没有渲染任何数据只是做撑开高度和滚动的作用, 内层盒子进行数据渲染和展示并且滚动的时候内层盒子不断的替换数据并且模拟滚动效果;

代码实现

// vue进行实现: