十亿行数据的虚拟滚动技术——HighTable 的五大实现方案

标签：#前端 #React #虚拟滚动 #性能优化 #大数据表格 #HighTable #DOM优化

总结：本文介绍了 HighTable 组件实现十亿级数据表格渲染的五大核心技术：懒加载仅获取可视区域数据、表格切片只渲染可见行、无限像素技术通过缩放滚动条突破浏览器高度限制、双模式滚动实现全局跳转与本地精确定位、两步随机访问分离垂直与水平滚动逻辑。这些方案完全基于原生 HTML 与 CSS，无需 Canvas 或自定义滚动条即可在浏览器中流畅处理海量数据。

文章要点：
- 技术1：懒加载：仅加载可视区域单元格数据，通过 DataFrame 接口异步获取并缓存数据，将 1TB 数据缩减为仅需加载约 3KB 的可见区域
- 技术2：表格切片：引入 Canvas 层作为定位参考，仅渲染可见行（约 30 行）而非全部十亿行，将 DOM 元素数量控制在恒定范围内
- 技术3：无限像素：设置 Canvas 最大高度（800 万像素），超过阈值时通过 downscaleFactor 缩放滚动条分辨率，突破浏览器元素高度限制（Firefox 约 1700 万像素）
- 技术4：像素级精确滚动：实现本地滚动（小幅度移动保持行连续性）与全局滚动（大幅度跳转）双模式，通过 globalAnchor 和 localOffset 状态管理，确保 2 万亿行内可达任意像素
- 技术5：两步随机访问：解耦垂直与水平滚动逻辑，先计算目标位置并垂直滚动，渲染完成后再处理水平定位与焦点设置，支持键盘导航和程序化跳转至任意单元格

链接：https://rednegra.net/blog/20260212-virtual-scroll/