table-layout: fixed 是优化大表格渲染性能的关键，配合语义结构和虚拟滚动可显著提升性能与可访问性。
table-layout: fixed 不设等于没开
浏览器默认用 table-layout: auto，遇到 500 行 × 15 列的表格，它得逐行扫描所有 <td> 内容（含长文本、未限制宽的图片、内联样式）来算列宽——这一项就能卡主线程 150ms+。设成 <code>fixed 后，浏览器只看第一行或 <col>，列宽瞬间确定。
实操建议：
- 必须在
<table> 上显式写 <code>style="table-layout: fixed"，别指望 reset.css 或父级继承 - 搭配
<col>标签预设宽度，例如：<col style="width: 120px"> <col style="width: auto"> <col style="width: 80px"> - 禁用
<th> 或 <code><td> 上的 <code>width属性、style.width，它们不参与fixed计算，纯属干扰 - 响应式列宽改用 CSS
@media控制<col>的width，不是在单元格里写min-width - 用
DocumentFragment批量构建，每 500–1000 行插入一次fragment - 每批插入后加
await new Promise(r => setTimeout(r, 0))，让出主线程，保持输入/滚动响应 - 服务端返回 JSON，前端控制节奏；坚决不用
innerHTML = hugeString或jQuery.html() - 若需 XSS 防护，用轻量函数如
escapeHtml()处理字段，别引入重型 sanitizer - 必须预设每行高度（或缓存动态高度），否则无法精确计算滚动偏移和占位高度
- 别手写
scroll监听 +innerHTML替换：用virtuoso（Vanilla/TS）或react-window（React），它们已处理 IntersectionObserver 回退、键盘导航、焦点管理 - 禁用
will-change: transform在滚动容器上——现代浏览器对表格内部元素做该声明反而触发强制图层提升，吃内存 - 后端返回原始数组时，前端别
.map()全量渲染；先按offset+pageSize切片，再喂给虚拟滚动器 - 哪怕只有 1 行表头，也必须包在
<thead> 里，数据进 <code><tbody>；页脚用 <code><tfoot>（非必须但推荐） <li><code><th> 必须带 <code>scope="col"（列头）或scope="row"（行头），不能只靠视觉加粗 - 每次动态更新
<tbody>（比如筛选、排序），要同步补全 <code>headers属性，否则无障碍支持断裂 -
<caption></caption>不是可选项——它是搜索引擎理解表格主题的第一依据，也是屏幕阅读器播报起点
真实场景里，
一次性 innerHTML 渲染 5000 行 = 主线程假死
不是 JS 慢，是浏览器在 DOM 构建阶段被压垮：字符串解析 + 节点创建 + 回流计算全堆在一次调用里。哪怕你用 document.createElement 单个追加，5000 次 appendChild 也照样卡顿。
实操建议：
虚拟滚动不是“加个 overflow:auto”就完事
只给容器设 display: block 和 overflow-y: auto，DOM 节点还在那儿，浏览器照常解析布局——对 200 行以上毫无意义。
实操建议：
语义结构残缺会让所有优化白做
没 <thead> 和 <code><tbody>，浏览器无法对表头做合成层提升，滚动时整个表格重绘；没 <code>scope 或 headers，屏幕阅读器强制遍历所有单元格关联行列，JS 查找也变慢。
实操建议：
table-layout: fixed + <col> + <thead>/</thead>
<tbody> 是最低成本见效组合；虚拟滚动适合 >500 行且需滚动交互的场景；而一旦数据过万、需多维分析或权限管控，就得考虑 BI 工具或 Canvas/WebGL 渲染了——HTML 表格不是万能容器，它只负责把二维结构化数据清晰、高效、可访问地呈现出来。</tbody>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
