表格加载慢主因是DOM节点爆炸、列宽重算卡主线程及一次性渲染，优化需控节点数（≤100行）、用table-layout:fixed锁布局、分片渲染+虚拟滚动。
表格加载慢，90%不是因为数据多，而是 DOM 节点爆炸 + 列宽重算卡主线程 + 一次性渲染压垮浏览器。重构重点不在删数据，而在控节点、锁布局、分节奏。
table-layout: fixed 必须硬编码在 <table> 上
<p>不设这个，浏览器默认用 <code>auto 模式逐行扫描所有 <td> 内容（含长文本、未限宽图片）来算列宽——500 行 × 15 列的表格，光这一项就能卡住主线程 150ms+。
<ul><li>必须写成 <code><table style="table-layout: fixed; width: 100%;">，别指望 CSS 类或父级继承
<li>搭配 <code><col> 预设宽度：<col style="width: 120px">
<col style="width: auto">
<th> 或 <code><td> 上的 <code>width 属性和 style.width，它们不参与 fixed 计算
@media 控制 <col> 的 width，不是在单元格里写 min-width
真实 DOM 行数必须控制在 100 行以内
设了 overflow-y: auto + 固定高度 ≠ 虚拟滚动。DOM 还在那儿，浏览器照常解析布局，对 200 行以上毫无意义。
- 只渲染视口内 ±1～2 屏的数据行（比如可视区高 600px，每行 40px，则最多渲染 30 行），其余用空
<tr> 占位并撑高 <li>必须预设每行高度（或缓存动态高度），否则无法精确计算滚动偏移</li> <li>别手写滚动监听+重渲染，用 <code>virtuoso（Vanilla/TS）或react-window（React），它们已处理 IntersectionObserver 回退、键盘导航、焦点管理 - 禁用
will-change: transform在滚动容器上——现代浏览器对表格内部元素做该声明反而触发强制图层提升，增加内存开销 - 把后端返回的数组按每 500–1000 行切片，每片用
DocumentFragment批量构建再插入 - 每批插入后加
await new Promise(r => setTimeout(r, 0))，让出主线程，保持输入/滚动响应 - 服务端必须支持真分页（
page=3&size=50），前端不能只靠data.slice()切片；否则 5 万行 JSON 解析 + 数组切片就成瓶颈 - 插入前用轻量函数如
escapeHtml()处理字段，别引入重型 sanitizer
批量插入必须用 DocumentFragment 分片
一次性 innerHTML = hugeString 渲染 5000 行，不是 JS 慢，是浏览器在 DOM 构建阶段被压垮：字符串解析 + 节点创建 + 回流计算全堆在一次调用里。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：首次加载分页尺寸别贪大。默认取 size=20，不是 size=100——大尺寸看似“少翻页”，实则首屏渲染压力陡增，CLS（累计布局偏移）极易超标，且用户根本感知不到“省了一次翻页”。
