答案是虚拟滚动通过只渲染可视区域元素提升性能，利用容器高度、滚动位置和项目高度动态计算可见项范围，结合transform定位与缓冲区机制实现流畅交互。
实现高性能的无限滚动列表，核心在于只渲染可视区域内的元素，避免一次性加载大量 DOM 节点导致页面卡顿。通过虚拟滚动（Virtual Scrolling）技术，可以显著提升长列表的渲染效率和交互流畅度。
1. 虚拟滚动的基本原理
虚拟滚动不渲染全部数据，而是根据容器高度、滚动位置和项目高度，动态计算出当前可见的项目范围，仅渲染这些项目。
- 维护一个固定高度的外层容器，设置 overflow-y: auto
- 用一个占位的空白元素（如 padding 或 transform）撑起整体滚动高度
- 只在视口内渲染少量项目（例如前后各多渲染几条），其余不可见项不生成 DOM
2. 关键参数计算
为了准确控制渲染范围，需要提前知道或估算以下信息：
- 每项高度：若固定高度，直接使用；若不固定，可采样平均或动态测量
- 可视区域高度：容器 clientHeight
- 滚动偏移量：scrollTop
- 渲染窗口大小：通常显示项数 + 上下缓冲区（如上下各多渲染 5-10 项）
根据这些数据，可算出起始索引：
startIndex = Math.floor(scrollTop / itemHeight) - buffer
结束索引同理。
3. 使用 transform 定位提升性能
避免使用 margin 或 padding 控制位置，推荐用 transform: translateY() 将可见项整体偏移。
- CSS transform 属于合成属性，由 GPU 加速，不会触发重排
- 配合 will-change: transform 可进一步优化
- 顶部空白由 transform 模拟，真实内容从计算后的 startIndex 开始渲染
4. 处理非固定高度的项目
当每项高度不一致时，需额外策略：
- 预估平均高度，用于快速定位大致区域
- 动态测量已渲染项的实际高度并缓存
- 滚动时根据累计高度查找可见范围，可用二分查找优化性能
- 滚动剧烈时可先用预估值，稳定后再精确更新
基本上就这些。关键是控制 DOM 数量、精准计算可视项、用高效方式定位。现代框架如 React、Vue 都有成熟的虚拟滚动组件（如 react-window、vue-virtual-scroller），也可基于原生实现轻量方案。不复杂但容易忽略细节。
