虚拟列表的实现原理是什么？适用什么场景？

虚拟列表的原理是『只渲染视口内的元素』。固定高度时：用总高度撑起滚动容器，监听滚动算出当前起始索引，只渲染 start 到 end 的那几十条，用绝对定位或 transform 放到对应位置。我在课程项目里用它渲染过两万条日志，DOM 从两万个降到三十个，滚动全程 60fps。

我在评论区场景实现过不定高度的虚拟列表。难点是没渲染前不知道每条多高，我用预估高度先占位，渲染后缓存真实高度并更新位置，滚动时用累积高度做二分查找定位起始项，配合上下缓冲区防止快速滚动白屏。踩过的坑是 resize 后缓存失效，后来监听容器尺寸变化重算才解决。

我会先讲适用判断：万级 DOM、每项渲染成本高、滚动容器可测量，才值得上虚拟列表；否则是过度设计。实现层面固定高度是特例，通用方案是『预估+实测修正』的位置管理器，把它抽成独立 hook 或组件。还要关注与骨架屏、无障碍、滚动恢复的配合，以及快速滚动时缓冲区的自适应。

追问『和分页加载的区别』：分页解决数据传输量，虚拟列表解决 DOM 数量，二者经常组合用。追问『快速滚动白屏怎么办』：加大缓冲区、渲染占位骨架、对 scroll 做节流并在 requestAnimationFrame 里更新。追问『搜索过滤后列表变化怎么处理』：重置高度缓存并把滚动位置归零或做锚点恢复。