虚拟滚动列表
虚拟滚动简单的说就是渲染在浏览器中当前可见的范围内的内容,通过用户滑动滚动条的位置动态地来计算显示内容,其余部分用空白填充来给用户造成一个长列表的假象。
当高度不固定时
- 传入动态高度,缺点 还是已知高度
- 预先渲染至屏幕外,再渲染至屏幕内,这导致渲染成本增加一倍,
- 维护一个 position 数组,监听 scrollTop 实时更新高度差 (后面都是写这个)
优化点
- 通过二分法寻找开始索引
- 防止滚动过快出现白屏,在可视区域上下增加额外的预渲染区域
- 使用 ** IntersectionObserver ** 替代 scrollTop,减少频繁计算
- 动态资源使用 ResizeObserver 监听高度变化