虚拟列表的核心思路是只渲染可视区域内的元素：通过滚动位置与容器尺寸计算起始/结束索引，用占位元素维持滚动高度，节流更新视图，并可扩展支持动态高度。
虚拟列表的核心思路是：只渲染可视区域内的元素，而非全部数据。当列表很长（比如上万条）时，直接渲染所有 DOM 节点会导致内存占用高、滚动卡顿、首次加载慢。通过计算滚动位置和容器尺寸，动态更新“当前该显示哪几项”，就能大幅减少 DOM 节点数量，提升性能。
计算可视区域范围
监听容器的 scrollTop 和 clientHeight，结合每项固定高度（或用 getBoundingClientRect 动态获取），算出当前可见的起始索引和结束索引：
- 起始索引 = Math.floor(scrollTop / itemHeight)
- 结束索引 = 起始索引 + Math.ceil(clientHeight / itemHeight) + buffer（加缓冲区避免白屏）
- 实际渲染的数据 = list.slice(start, end)
用占位元素撑开滚动高度
整个列表容器仍需保持“完整高度”，否则滚动条会消失或行为异常。可在列表顶部/底部插入空白 div 占位：
- 顶部占位高度 = start × itemHeight
- 底部占位高度 = (list.length - end) × itemHeight
- 这样滚动条长度正常，且内容始终对齐原始位置
监听滚动并节流更新
直接在 scroll 事件中重算范围会频繁触发，建议用 requestAnimationFrame 或简单节流（如 16ms 一次）：
立即学习“Java免费学习笔记（深入）”；
- 避免在 scroll 中直接 setState（React）或操作 DOM
- 先记录 scrollTop，等下一帧再计算并批量更新视图
- 滚动停止后可做一次精确校准（可选）
支持动态高度（进阶）
若每行高度不固定，需预先缓存或异步测量：
- 首次渲染时用 offsetHeight 或 getBoundingClientRect 记录每项真实高度
- 构建一个高度映射表：heightMap[index] = height
- 计算起始位置时，用前缀和数组快速定位（如 positionMap[i] 表示前 i 项总高度）
- 注意缓存失效场景（如内容变化、字体加载完成）
不复杂但容易忽略。关键不是写得多，而是只让眼睛看到的那几十个节点活着。
