什么是虚拟滚动
大数据量下, 只展现视口中能容纳的数据条数, 其他数据应占用的位置, 使用空白撑开, 从而显示滚动条, 并在滚动时,动态截取要显示的内容
虚拟滚动作用
减少界面中dom节点的渲染, 在用户体验基本不变的情况下,提升页面渲染性能, 有效防止界面卡顿.
如: 后端返回了1w条数据, 如果按照正常的渲染方式, 至少需要渲染1w个dom节点. 而界面每次可能只能显示10几条的数据,那么其他dom节点实际上是意义不大的
大数据量下可用虚拟列表优化的地方
- 表格数据展示
- 下拉列表
- 树结构展示
虚拟滚动的组成部分和三种状态
组成部分
头部虚拟占位(下图顶部的灰色部分)
视口显示数据(下图中间的蓝色部分)
底部虚拟站位(下图底部的灰色部分)
三种状态
初始状态(未滚动)
特点: 头部虚拟占位的高度为0. 如下图
滚动到数据的中间部分
滚动到末尾
特点: 底部虚拟占位的高度为0. 如下图
