表格加载慢主因是DOM节点爆炸、列宽重算卡主线程及一次性渲染，优化需控节点数（≤100行）、用table-layout:fixed锁布局、分片渲染+虚拟滚动。

表格加载慢，90%不是因为数据多，而是 DOM 节点爆炸 + 列宽重算卡主线程 + 一次性渲染压垮浏览器。重构重点不在删数据，而在控节点、锁布局、分节奏。

table-layout: fixed 必须硬编码在 上

不设这个，浏览器默认用 auto 模式逐行扫描所有

内容（含长文本、未限宽图片）来算列宽——500 行 × 15 列的表格，光这一项就能卡住主线程 150ms+。

• 必须写成 ，别指望 CSS 类或父级继承
• 搭配
预设宽度：
• 禁用
的 width，不是在单元格里写 min-width

真实 DOM 行数必须控制在 100 行以内

设了 overflow-y: auto + 固定高度 ≠ 虚拟滚动。DOM 还在那儿，浏览器照常解析布局，对 200 行以上毫无意义。

• 只渲染视口内 ±1～2 屏的数据行（比如可视区高 600px，每行 40px，则最多渲染 30 行），其余用空
占位并撑高
• 必须预设每行高度（或缓存动态高度），否则无法精确计算滚动偏移
• 别手写滚动监听+重渲染，用 virtuoso（Vanilla/TS）或 react-window（React），它们已处理 IntersectionObserver 回退、键盘导航、焦点管理
• 禁用 will-change: transform 在滚动容器上——现代浏览器对表格内部元素做该声明反而触发强制图层提升，增加内存开销

批量插入必须用 DocumentFragment 分片

一次性 innerHTML = hugeString 渲染 5000 行，不是 JS 慢，是浏览器在 DOM 构建阶段被压垮：字符串解析 + 节点创建 + 回流计算全堆在一次调用里。


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 把后端返回的数组按每 500–1000 行切片，每片用 DocumentFragment 批量构建再插入
• 每批插入后加 await new Promise(r => setTimeout(r, 0))，让出主线程，保持输入/滚动响应
• 服务端必须支持真分页（page=3&size=50），前端不能只靠 data.slice() 切片；否则 5 万行 JSON 解析 + 数组切片就成瓶颈
• 插入前用轻量函数如 escapeHtml() 处理字段，别引入重型 sanitizer

最易被忽略的一点：首次加载分页尺寸别贪大。默认取 size=20，不是 size=100——大尺寸看似“少翻页”，实则首屏渲染压力陡增，CLS（累计布局偏移）极易超标，且用户根本感知不到“省了一次翻页”。

或	上的 width 属性和 style.width，它们不参与 fixed 计算 响应式改列宽，用 @media 控制

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！