虚拟滚动是解决长列表卡顿的最优方案，其核心是仅渲染可视区域DOM、用占位元素撑高滚动条、通过transform动态定位，从而将DOM数量控制在20–50个，实现万级数据60帧流畅滚动。

直接用 table 渲染几千行数据，滚动卡顿、DOM 膨胀、内存飙升——这不是浏览器不行，是结构没做对。长列表滚动表格必须放弃「全量渲染」，改用「虚拟滚动」+ 语义化结构双策略。

为什么不能直接套 table 标签渲染万级数据

浏览器对 table 的渲染机制很特殊：哪怕只显示 20 行，它仍要构建全部 tr 和 td 的 DOM 节点，并计算整张表的列宽、边框合并、跨行跨列布局。这导致：

• table 不支持 CSS contain: layout paint 隔离，无法跳过不可见区域的样式计算
• 所有 tr 必须是 tbody 的直系子元素，无法用 documentFragment 批量插入或动态替换
• 滚动时触发频繁的 layout thrashing（重排），尤其在有 border-collapse: collapse 或 colspan 时更严重
• 辅助技术（如屏幕阅读器）会尝试遍历全部 tr，造成可访问性阻塞

用 div + ARIA 模拟表格结构的实操要点

不是抛弃表格语义，而是把语义从标签移到属性上。核心是让视觉呈现和逻辑结构解耦：

• 外层用 div role="table" 替代 table，宽度设为 display: grid 或 display: flex 控制列宽
• 表头用 div role="rowgroup" 包裹 div role="columnheader"，并加 aria-sort 支持排序反馈
• 每行数据用 div role="row"，每个单元格用 div role="cell"，并用 aria-colindex 和 aria-rowindex 显式声明位置（尤其在虚拟滚动跳帧时防止读屏错乱）
• 禁用原生 table 相关 CSS（如 border-collapse、vertical-align），改用 flex 对齐 + grid-area 定位
• 必须设置 aria-labelledby 指向表头 ID，否则屏幕阅读器无法建立行列关联

virtual-scroller 库如何配合表格语义使用

主流方案如 react-window 或 vue-virtual-scroller 默认输出的是扁平 div 列表，要适配表格需手动补全 ARIA 层级：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• 滚动容器设 role="table" 和 aria-label="订单列表"
• 表头不参与虚拟滚动，固定在顶部（避免滚动时 header 错位）
• 每一项 item 渲染为 div role="row"，内部每个字段用 div role="cell"，不要用 span —— span 没有默认 ARIA 角色，读屏器会忽略其表格上下文
• 给每行加 data-row-index 属性，配合 useEffect 或 mounted 动态更新 aria-rowindex，防止快速滚动时序错乱
• 禁用 pointer-events: none 在占位空白区，否则键盘导航 Tab 会跳过整段空白

容易被忽略的兼容性断点

重构后最常出问题的不是功能，而是边缘场景：

• IE11 不支持 role="table" 的完整语义链，必须降级为真实 table + display: none 隐藏不可见行（用 tr:nth-child(n+100) 类选择器）
• macOS VoiceOver 对 aria-rowindex 的识别有延迟，需在 scrollEnd 后 setTimeout(() => el.focus(), 0) 强制焦点同步
• 移动端 Safari 在 overflow: auto 容器里对 role="row" 的触摸反馈异常，需加 -webkit-overflow-scrolling: touch 并监听 touchstart 阻止默认行为
• 导出 Excel 时，不能依赖 DOM 结构，必须从原始数据源重新生成 sheet，否则导出内容与视图不一致

真正难的不是写出能滚动的列表，而是让滚动后的每一行，在键盘、读屏器、缩放、打印、导出这些场景下，都保持和原始表格完全一致的逻辑关系。结构重构不是为了炫技，是为后续所有交互、无障碍、维护留出确定性空间。