第一次了解这项技术是通过 react-virtualized 组件。当时就大概了解了一下,没有深入研究。近期刚好有时间折腾了一下,想将其技术对现有项目进行优化,就对其技术研究了一番。有点收获,就整理一了一下,与大家分享分享。
singsong: react-virtualized 的作者已对 react-virtualized 进行重写。并重新构建为 react-window。
背景
该技术算是对无限滚动加载的一种优化。无限滚动加载随着加载数量的增多,对性能的影响就越来越大。因为每次浏览器需要重绘的 DOM 节点数越来越多,耗时越长。这对用户体验造成的影响也是不容忽略的。为了减少 DOM 节点数量,virtual list 技术应运而生。
对比
How does windowing work?
- 定义一个相对定位(
position: relative;
)的容器 container。 - 在 container 中定义一个滚动容器 scroller。
- 在 scroller 中绝对定位(
position: absolute;
)可见的 items。