HTML表格怎么处理大数据量？虚拟滚动原理-html教程-PHP中文网

虚拟滚动是渲染10万行表格的必需方案，必须通过scrolltop与固定rowheight计算可视索引、用absolute定位占位、处理表头固定和键盘导航等硬性前提。

html表格怎么处理大数据量？虚拟滚动原理

10 万行表格直接渲染，浏览器必然卡死——虚拟滚动不是“锦上添花”，而是必须落地的底线方案。

为什么 display: none 不算虚拟滚动

把全部 <tr> 塞进 DOM，再用 <code>display: none 隐藏不可见行，看似简单，实则无效：

10 万行 = 10 万个 DOM 节点持续驻留内存，DevTools 的 Memory 面板立刻飙红
每次 scroll 触发重排（reflow），浏览器要反复计算所有行的布局，帧率常跌破 10fps
visibility: hidden 同样无效——节点还在，开销照旧
React/Vue 中若没稳定 key 或没用 memo 包裹，display: none 切换还会引发整块子树重渲染

scrollTop + 固定行高才是计算可视索引的唯一可靠路径

别依赖 IntersectionObserver 主控虚拟滚动——它响应延迟、定位不准，只适合图片懒加载。正确做法是监听容器的 scroll 事件，靠 scrollTop 和预设的 rowHeight 算索引：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

const startIndex = Math.floor(scrollTop / rowHeight);
const visibleCount = Math.ceil(containerHeight / rowHeight) + 4;
const rowsToRender = data.slice(startIndex, startIndex + visibleCount);

rowHeight 必须固定（如 48px），否则得缓存每行 getBoundingClientRect()，性能代价翻倍
+ 4 是缓冲区，防快速滚动时闪白
容器高度要用 clientHeight 或 CSS height，不能用 offsetHeight（含边框）
节流必须做，requestAnimationFrame 比 throttle(16) 更稳

position: absolute 占位容器是内容不跳动的前提

只渲染部分 <tr> 还不够，必须让它们“停在该在的位置”：<ul> <li>外层容器设 <code>overflow-y: auto，且有明确 max-height

内部放一个占位 <div>，高度设为 <code>data.length * rowHeight，并加 position: relative

实际渲染的 <tr> 放进这个 <code><div>，每个都加 <code>position: absolute; top: ${index * rowHeight}px

漏掉 position: relative，absolute 子元素会相对于 body 定位，一滚动就错位

别用 transform: translateY() 替代 top——某些 Chrome 版本下会触发意外合成层，更卡

表头固定和键盘导航是上线前最容易崩的两个点：缩放窗口、按 PageDown、用方向键滚动，任何一个没处理好，用户立刻感知卡顿。这些不是“附加功能”，而是虚拟滚动交付的硬性前提。