结论：500行×15列以上表格必须同时满足table-layout:fixed、虚拟滚动（用virtuoso/react-window）、语义化标签（thead/tbody/tfoot+scope）、固定列分治及documentfragment批量渲染，缺一不可。
直接说结论：500 行 × 15 列以上的表格，不加虚拟滚动就是假死起点；但只加 overflow-y: auto 或手写 scroll 监听 + innerHTML 替换，等于没做优化——DOM 还在那儿，浏览器照算、照绘、照卡。
table-layout: fixed 不设等于没开
浏览器默认用 table-layout: auto，遇到长文本、未限制宽的图片、内联样式，它得逐行扫描所有 <td> 内容来算列宽。500 行 × 15 列的表格，光这一项就能卡主线程 150ms+。
<ul><li>必须在 <code><table> 上显式写 <code>style="table-layout: fixed"，别指望 reset.css 或父级继承
<col> 标签预设宽度，例如：<col style="width: 120px">、<col style="width: auto">（仅一列可用 auto）<th> 或 <code><td> 上的 <code>width 属性和 style.width，它们不参与 fixed 计算，纯属干扰
@media 控制 <col> 的 width，不是在单元格里写 min-width
虚拟滚动不是“加个 overflow”就完事
只给容器设 display: block 和 overflow-y: auto，DOM 节点还在那儿，浏览器照常解析布局——对 200 行以上毫无意义。
- 必须预设每行高度（或缓存动态高度），否则无法精确计算滚动偏移和占位高度
- 别手写
scroll监听 +innerHTML替换：用virtuoso（Vanilla/TS）或react-window（React），它们已处理IntersectionObserver回退、键盘导航、焦点管理 - 禁用
will-change: transform在滚动容器上——现代浏览器对表格内部元素做该声明反而触发强制图层提升，吃内存 - 后端返回原始数组时，前端别
.map()全量渲染；先按offset + pageSize切片，再喂给虚拟滚动器
固定列必须拆成独立滚动区
虚拟滚动本身不支持固定列。强行用 position: sticky 或 transform 模拟，滚动时会错位、失焦、光标跳变。
- 把表格逻辑上分为三部分：左侧固定列区域、中间可滚动内容区、右侧固定列区域（如需）
- 每个区域独立维护数据切片和渲染范围，但所有区域的行高必须严格一致（推荐用
line-height + box-sizing: border-box） - 监听中间容器的
scrollLeft，动态设置左右固定列的transform: translateX()抵消视觉偏移 - 纵向滚动统一由中间容器触发，通过
scrollTop同步赋值给左右容器（注意避免循环触发） - 表头固定列需与内容列一一对应，建议用
data-key或index显式绑定列关系
语义结构残缺会让所有优化白做
没有 <thead> 和 <code><tbody>，浏览器无法对表头做合成层提升，滚动时整个表格重绘；没有 <code>scope 或 headers，屏幕阅读器强制遍历所有单元格关联行列，JS 查找也变慢。
- 哪怕只有 1 行表头，也必须包在
<thead> 里，主体数据进 <code><tbody>；页脚用 <code><tfoot><li><code><th> 必须带 <code>scope="col"（列头）或scope="row"（行头），不能只靠视觉加粗 - 每次动态更新
<tbody>（比如筛选、排序），要重新补全 <code>headers属性，否则无障碍支持断裂 - 一次性
innerHTML渲染 5000 行 = 主线程假死；用DocumentFragment批量构建，每 500–1000 行插入一次，并加await new Promise(r => setTimeout(r, 0))让出主线程
最易被忽略的是：虚拟滚动不是性能终点，而是语义结构、CSS 布局、DOM 生命周期三者协同的起点。少一个 <thead>，多一个内联 <code>width，或者漏掉 scope，再快的滚动也会在可访问性、稳定性或长期维护上埋雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
