虚拟列表通过只渲染可视区域内容提升长列表性能：固定高度用绝对定位与scrolltop计算索引；动态高度需采样缓存实际高度并回退估算；添加缓冲区、节流滚动、复用dom元素以保障流畅体验。
JavaScript 中长列表渲染性能差，根本原因是 DOM 节点过多。当列表有几千甚至上万条数据时，一次性全量渲染会触发大量样式计算、布局和绘制，导致页面卡顿、内存飙升、滚动不跟手。虚拟列表不是“黑科技”，而是用空间换时间的务实方案：只渲染用户当前能看到的那部分，其余用空白占位撑起滚动条，视觉上无感，性能上飞跃。
固定高度是最简单可靠的起点
如果每项高度一致（比如统一 48px 的列表行），实现最轻量：
- 外层容器设固定高度 + overflow-y: auto，形成滚动视口
- 内部用一个 position: absolute 的内容区，高度设为
总数据量 × 单项高度，充当“隐形尺子”撑开滚动条 - 滚动时监听
scroll事件，用scrollTop / itemHeight算出起始索引，再结合容器高度算出结束索引 - 只把该范围内的数据生成 DOM，并用
transform: translateY(${startIndex * itemHeight}px)或top定位到正确位置
动态高度需要缓存与采样
真实项目中，列表项常含图片、多行文本等，高度不一。硬编码 itemHeight 会错位。可行做法是：
- 首次渲染前，对前 N 项（如 20 条）做真实测量，取平均值作为初始估算高度
- 维护一个 heightMap 对象，记录已知项的实际高度（如
{ 0: 52, 1: 48, 2: 64 }） - 计算可视范围时，用已知高度累加；遇到未知项，回退到平均高度估算，后续再补测更新
- 避免每次滚动都重测——只在新项首次进入视口时测量一次并缓存
滚动体验靠缓冲区和防抖保顺滑
纯按视口边界渲染，快速滚动时容易闪白或跳动。两个关键优化：
- 上下各加 3–5 项缓冲区：渲染范围从
[start, end]扩展为[start - 3, end + 3]，让内容提前就位 - 滚动事件加节流（throttle），比如 16ms 一帧只处理一次，避免高频重算拖慢主线程
- 用 requestIdleCallback 延迟非关键操作（如更新高度缓存），确保滚动响应优先
别忘了清理和复用 DOM
频繁清空 innerHTML 再重建，会引发大量垃圾回收。更优做法：
- 预先创建一批 DOM 元素（比如 20 个
div.list-item），放入池子 - 每次只更新这些元素的
textContent和style.top，不销毁重建 - 用
DocumentFragment批量插入，减少重排重绘次数 - 监听
resize事件，窗口尺寸变化时及时重算可视范围
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
