固定行高+scrollTop计算索引+position: absolute占位是最优虚拟滚动方案；必须固定行高以保障线性映射，避免强制同步布局；禁用display: none/visibility: hidden，核心是“不创建”而非“藏起来”；滚动监听需用requestAnimationFrame节流，缩放后须重算容器参数。
固定行高 + scrollTop 计算索引 + position: absolute 占位，是当前最稳定、兼容性最好、性能开销最低的实现路径。别被“自动测高”“动态高度支持”这类宣传带偏——真要处理不等高行，DOM 查询成本会指数级上升，卡顿从滚动开始就不可逆。
为什么不能用 display: none 或 visibility: hidden 代替虚拟滚动
它们只是隐藏 DOM，不是删掉。10 万条数据 = 10 万个 tr 元素持续驻留内存，浏览器仍需维护样式树、布局树、图层合成信息。重排（reflow）和重绘（repaint）开销照旧，滚动时帧率暴跌是必然结果。虚拟滚动的核心动作是「不创建」，不是「藏起来」。
scrollTop + 固定行高算索引，为什么必须固定
因为所有边界计算都依赖线性映射：startIndex = Math.floor(scrollTop / itemHeight)。一旦 itemHeight 不固定，你就得对每行调用 getBoundingClientRect() 来缓存位置，而这个 API 在滚动中反复调用会触发强制同步布局（layout thrashing），比全量渲染还慢。
- 行高差异超过 ±5px，视觉错位就会明显；差异超 ±15px，用户能感知到“跳行”
- 若业务强求不等高，优先考虑分组折叠、截断+展开、或服务端预计算高度字段，而非前端实时测量
- 表格场景下，
table-layout: fixed+width显式声明列宽，能极大减少单元格内容撑开导致的高度波动
position: absolute 定位内容区，三个常见翻车点
占位容器没设 position: relative，子元素的 top 偏移会相对于最近的定位祖先，而不是你预期的滚动容器；用 transform: translateY() 替代 top，在部分 Chrome 版本（如 115–122）中会意外触发额外合成层，GPU 内存暴涨；直接 innerHTML = newRows 而不清空旧节点，会导致事件监听器残留、Vue/React key 冲突、甚至 input 框焦点丢失。
- 占位
div必须放在滚动容器内，且样式含position: relative - 真实渲染区用
top: ${offset}px，不用transform—— 它更可控、无合成陷阱 - 每次更新前先清空子节点：
contentEl.replaceChildren()（现代浏览器）或contentEl.innerHTML = ''（兼容 IE11）
滚动监听不做节流，页面立刻变幻灯片
scroll 事件在 Chrome/Firefox 中每秒可触发 60–120 次，不加限制就直接读 scrollTop + 计算 + 渲染，等于每秒执行几十次 DOM 操作。用户一碰滚动条，CPU 就飙到 90%，帧率跌破 10fps。
- 用
requestAnimationFrame包一层是最轻量方案：let pending = false; function handleScroll() { if (!pending) { pending = true; requestAnimationFrame(() => { updateVisibleRange(); pending = false; }); } } - 避免在监听函数里直接调用
setState或ref.value = ...—— Vue 的watch、React 的useEffect都应只响应已节流后的startIndex和visibleData - 窗口缩放后必须重新计算
containerHeight和visibleCount，否则缓冲区失效，滚动到底部会白屏
真正难的从来不是“怎么让第一屏动起来”，而是“怎么让第 8327 行滚动时不卡、不跳、不丢焦点、不爆内存”。行高是否真固定、占位容器定位基准是否干净、滚动更新是否被节流、缩放后是否重算——漏掉其中任意一个，大数据量下崩溃只是时间问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
