万行表格卡顿主因是DOM爆炸、table-layout: auto强制重排及主线程阻塞；须用table-layout: fixed配定义列宽、服务端分页返回JSON、DocumentFragment批量插入+requestIdleCallback让出主线程、虚拟滚动控制可视区域DOM数量。
直接渲染万行表格卡死，不是因为 <table> 标签本身慢，而是 DOM 节点爆炸 + <code>table-layout: auto 强制重排 + 一次性插入触发主线程长时间阻塞。分步加载必须配合布局控制和 DOM 构建节奏，否则只是把卡顿从“首屏”挪到“滚动中”。
table-layout: fixed 必须配
只写 table-layout: fixed 是无效的。浏览器仍会扫描第一行所有 <td> 内容推导列宽，<code><col> 才是唯一参与布局计算的合法元素。
-
<col width="120"> <col width="auto"> <col width="80px">—— 其中width="auto"合法但仅限一列；多列设auto会让fixed失效 - 禁用在
<th> 或 <code><td> 上写 <code>width属性或style.width：它们不参与布局，纯属冗余且干扰调试 - 响应式列宽？用
@media控制<col>的width，别用 JS 动态改style—— 后者强制重排 - 真实分页要求后端支持
page=3&size=50，返回仅含这 50 条的 JSON，并附带total字段 - 前端拿到数据后，**立刻清空
<tbody> 并批量插入**：用 <code>DocumentFragment或innerHTML一次写入（注意 XSS，需 sanitize） - 禁用「无限滚动」式加载表格：它破坏浏览器前进/后退，让分页控件失效，且用户无法预估总数据量
- 用
document.createElement('tr')+DocumentFragment批量构建，每 500–1000 行append一次 - 每批插入后加
await new Promise(r => setTimeout(r, 0))，让出主线程，保持滚动/输入响应 - 避免 jQuery
.html()或原生.innerHTML = str—— 服务端返回 JSON，前端控制渲染节奏 - 行高必须固定（如
height: 42px），否则无法精确计算滚动偏移与可视索引 <thead> 和 <code><tbody> 分层不可省：没 <code><thead>，浏览器无法对表头做合成层提升，滚动时整个表格<a style="color:#f60; text-decoration:underline;" title="重绘" href="https://m.php.cn/zt/70565.html" target="_blank">重绘</a> <p>最容易被忽略的是：没有 <code><col>的table-layout: fixed等于没设；服务端返回 HTML 字符串的“分页”只是自欺欺人；以及，虚拟滚动里哪怕漏掉一行height的 CSS 声明，都会导致滚动错位和白屏。
分块加载必须服务端返回 JSON，而非 HTML 字符串
前端 data.slice() 对 5 万行以上数据毫无意义：JSON 解析 + 数组切片本身就成了瓶颈，且用户无法跳转末页。
每批插入后必须让出主线程，否则界面冻结
一次性写入 5000 行 <tr>，<code>innerHTML 会触发多次重排 + 字符串解析开销，页面直接假死。
虚拟滚动是撑住 10 万+ 行的唯一可靠方案
当表格行数超过 200，display: block + overflow-y: auto 加固定行高才是正解。此时 <table> 语义已退居次要，DOM 节点数必须严格受控。<ul><li>不需要真实渲染全部 <code><tr>，只需渲染可视区域 ±20 行，滚动时动态替换 <code>textContent 和 dataset
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
