只渲染可视区域元素以提升性能，通过计算滚动位置动态更新内容。利用占位模拟高度，结合节流与索引计算实现高效列表渲染。
前端虚拟滚动列表的核心思路是：只渲染可视区域内的元素，而非全部数据。这样即使有成千上万条数据，页面也不会卡顿。关键在于计算当前可视范围，并动态更新渲染项。
理解虚拟滚动的基本原理
当列表数据量大时，DOM 节点过多会导致内存占用高、页面卡顿。虚拟滚动通过以下方式解决：
- 只渲染视口内及附近的数据项（比如上下多渲染几条用于过渡）
- 用空白的占位元素（通常是外层容器的 padding 或 transform）模拟整个列表的高度
- 滚动时动态更新可见区域的内容，复用 DOM 元素
核心参数包括：每项高度、视口高度、总数据量。通过滚动位置计算出起始索引和结束索引，然后只渲染这一区间的数据。
实现步骤与关键技术点
一个基础的虚拟滚动可以按以下步骤实现：
立即学习“前端免费学习笔记（深入）”；
- 设置外层容器为固定高度并开启滚动：给容器设置 overflow-y: auto，限定可视区域
- 计算可视区域能容纳的项目数量：视口高度除以单个项目高度，向上取整
- 根据 scrollTop 计算起始索引：scrollTop / itemHeight，向下取整
- 确定渲染区间：从起始索引开始，多渲染前后几条（缓冲区），避免快速滚动时白屏
- 使用 transform 定位内容：将渲染区域整体用 transform: translateY() 移动到正确位置
- 设置顶部/底部占位高度：用 padding 或伪元素撑起整体滚动高度，使滚动条比例正常
处理不同高度项目的优化方案
如果每项高度不固定，就不能简单用 scrollTop / itemHeight 计算索引。这时需要：
- 预先估算平均高度，用于初始定位
- 在渲染过程中记录每个元素的实际位置（缓存其 top 值）
- 滚动时通过二分查找找到最接近的可见项索引
- 动态更新位置缓存，提升后续计算效率
这种方案复杂度更高，但能支持聊天记录、动态卡片等场景。
简化实现建议
对于大多数业务场景，推荐使用成熟库如 react-window、vue-virtual-scroller，它们已处理好性能、兼容性、边界情况等问题。
若需手写，可先实现等高版本，结构清晰且易于调试。重点确保：
- 滚动事件节流（throttle）避免频繁触发重绘
- 正确计算偏移量，防止内容错位
- 处理首尾边界，避免索引越界
基本上就这些，不复杂但容易忽略细节。
