大数据量如何渲染 #

https://cdn.jsdelivr.net/gh/shengxinjing/static/virtual.webp

https://cdn.jsdelivr.net/gh/shengxinjing/static/virtual1.gif

1. 减少不必要渲染
2. 减少不必要的加载

虚拟列表 #

0. 可视区的高度固定 viewHeight
1. 每个列表高度height (也可能不定)
2. 可视区域的数据索引start和end
3. 基于startIndex计算出offset偏移
4. 渲染数据 --

虚拟列表 #

1. 总高度(只漏出可视区) = height * list.length
2. start = Math.floor(scrollTop / height)
3. end = start + Math.ceil(viewHeight / height)
4. offset = scrollTop - (scrollTop % height);
5. onScroll event

高度不确定 #

1. 先离屏渲染 (不可见区域)，获取高度后 再计算 首次渲染会卡顿
2. 预估大致高度，先渲染一部分，再计算高度+缓存

todo #

1. 二分查找优化 （findIndex)
2. 用IntersectionObserver优化scroll的性能