虚拟滚动的核心是只渲染可视区域内的元素，通过计算滚动位置动态更新固定数量dom节点的显示内容与transform位移，结合节流、passive事件及高度缓存策略实现高性能长列表渲染。
虚拟滚动的核心是只渲染可视区域内的元素，而不是把整个长列表一次性塞进 DOM。这样能避免页面卡顿、内存暴涨，尤其适合成千上万条数据的场景。关键不在于“滚动时加载”，而在于“滚动时动态更新显示哪几行”。
1. 计算可视区域和渲染范围
监听容器的 scroll 事件，结合容器高度、滚动偏移（scrollTop）、单个子项高度，就能算出当前该显示哪些索引的数据。
- 假设每项固定高 60px，容器高 400px → 最多显示约 7 行（
Math.ceil(400 / 60)） - 滚动到位置 250px → 起始索引 ≈
Math.floor(250 / 60) = 4，渲染从第 4 行开始的 7 行 - 用
transform: translateY()把整个列表容器整体下移，让视觉对齐，而不是删减/插入大量 DOM 节点
2. 用一个 ul 容器 + 固定数量的 li 实现复用
不为每条数据创建新节点，而是复用固定数量（比如 10～15 个）的 li 元素，仅更新它们的 textContent 和 data-index 属性。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 初始化时创建 10 个
li，放入ul中 - 每次滚动后，遍历这 10 个
li，根据计算出的起始索引，给每个赋值对应数据：li.textContent = list[startIndex + i].name - 同时设置
li.style.transform = `translateY(${i * 60}px)`精确定位
3. 处理滚动性能：节流 + passive 事件
高频 scroll 会拖慢主线程，必须优化：
- 用
requestIdleCallback或简单节流（如 16ms 一帧）延迟更新渲染逻辑 - 注册 scroll 事件时加
{ passive: true }，避免阻止默认行为导致的卡顿 - 把容器设为
overflow-y: auto，并确保它有明确高度和will-change: transform（可选，帮助 GPU 加速）
4. 支持动态高度？需要额外缓存或估算
如果每行高度不固定，无法直接用整除计算索引。这时可以：
- 预先扫描一遍数据，生成“各项目高度 + 累计偏移量”的数组（如
[0, 60, 135, 198, ...]），再用二分查找定位可视区间 - 或者先按平均高度粗略渲染，等图片/内容加载完成后再触发重算和重排（需配合 ResizeObserver 或 load 事件）
- 更轻量的做法：限制最小/最大高度，用均值 + 小范围容错（比如 ±20%）做近似处理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
