Now vibe coding, so learning hammer FE ?
标签：#前端 #React #性能优化 #虚拟滚动
链接：https://rednegra.net/blog/20260212-virtual-scroll/
总结：本文介绍了 HighTable 组件实现数十亿行数据表格渲染的五大核心技术：懒加载仅获取可见数据、表格切片仅渲染可见行、无限像素突破浏览器高度限制、双模式滚动兼顾精确与快速导航、两步随机访问支持键盘操作。这些方案完全基于原生 Web 技术，无需 Canvas 或自定义滚动条即可实现高性能大数据表格。
文章要点：
- 懒加载：通过 DataFrame 接口仅加载视口可见单元格，将 1TB 数据集的内存占用从全量降至约 3KB（30 行），数据异步获取并缓存
- 表格切片：引入 Canvas 层作为定位参考，仅渲染可见行（约 30 个 DOM 元素），而非全部数十亿行，保持渲染性能恒定
- 无限像素：针对浏览器最大高度限制（Firefox 约 1700 万像素），设置 800 万像素阈值，超过时通过缩放因子降低滚动条分辨率，实现无行数上限的导航
- 像素级精确滚动：实现局部滚动（小幅度精确移动）与全局滚动（大幅度位置跳跃）双模式，通过
- 两步随机访问：解耦垂直与水平滚动逻辑，支持键盘导航（方向键、
- 技术选型：完全基于原生 Web 平台（HTML 表格、CSS 绝对定位、JavaScript 事件），利用
链接：https://rednegra.net/blog/20260212-virtual-scroll/
总结：本文介绍了 HighTable 组件实现数十亿行数据表格渲染的五大核心技术：懒加载仅获取可见数据、表格切片仅渲染可见行、无限像素突破浏览器高度限制、双模式滚动兼顾精确与快速导航、两步随机访问支持键盘操作。这些方案完全基于原生 Web 技术，无需 Canvas 或自定义滚动条即可实现高性能大数据表格。
文章要点：
- 懒加载：通过 DataFrame 接口仅加载视口可见单元格，将 1TB 数据集的内存占用从全量降至约 3KB（30 行），数据异步获取并缓存
- 表格切片：引入 Canvas 层作为定位参考，仅渲染可见行（约 30 个 DOM 元素），而非全部数十亿行，保持渲染性能恒定
- 无限像素：针对浏览器最大高度限制（Firefox 约 1700 万像素），设置 800 万像素阈值，超过时通过缩放因子降低滚动条分辨率，实现无行数上限的导航
- 像素级精确滚动：实现局部滚动（小幅度精确移动）与全局滚动（大幅度位置跳跃）双模式，通过
globalAnchor 和 localOffset 状态管理，确保任意行可达（支持至 2 万亿行）- 两步随机访问：解耦垂直与水平滚动逻辑，支持键盘导航（方向键、
Ctrl+方向键）和程序化跳转，通过标志位控制滚动时序避免冲突- 技术选型：完全基于原生 Web 平台（HTML 表格、CSS 绝对定位、JavaScript 事件），利用
position: sticky 实现表头固定，无需 Canvas 或自定义滚动条