真正拖慢页面的是冗余结构、无效节点和错误渲染模式；应删除无语义的空表格、设table-layout:fixed+预设宽度、用DocumentFragment分批插入、采用虚拟滚动并补全语义结构。
精简 table 标签本身不能直接提升性能，真正拖慢页面的是冗余结构、无效节点和错误的渲染模式。删掉几个空 tr 或 td 不会变快，但移除整个无用表格、禁用自动列宽计算、避免 DOM 爆炸式插入，效果立竿见影。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
怎么识别并删除无用的 table 结构
浏览器里搜 <table> 只是第一步，关键看它是否承载真实数据或语义功能：
<ul><li>打开开发者工具 Elements 面板，Ctrl+F 搜索 <code><table>，逐个点开检查：<code>textContent 为空、无 caption、无 thead、父级也没用到 display: table 的，基本可删
<table><tr><td></td></tr></table> 或只有 的，确认 CSS 里没设 border 或 background 后直接整段删tr/td 的，大概率是旧版编辑器生成的布局表格，应替换为 <div class="grid"> + CSS Grid
<li>删完立刻刷新，重点看有没有错位、间距塌陷——若有，说明某处 CSS（比如 <code>.wrapper > table）隐式依赖了该结构为什么只删标签不够，还得改 table-layout 和 col
table-layout: auto（默认值）是隐形性能杀手，尤其当表格含长文本、未限制宽度的图片或内联样式时，浏览器必须遍历所有 td 内容才能算出列宽。500 行 × 15 列的表，光这一步就能卡主线程 150ms+。
- 必须显式写
style="table-layout: fixed"在<table> 上，reset.css 或父级继承无效 <li>只加 <code>table-layout: fixed不行，必须配<col>标签预设宽度，例如：<col width="120"> <col width="auto"> <col width="80px"> - 禁用
<th> 或 <code><td> 上的 <code>width属性和style.width，它们不参与fixed计算，纯属干扰 - 响应式列宽用
@media控制<col>的width，别在单元格里写min-width - 用
DocumentFragment批量构建，每 500–1000 行插入一次 fragment - 每批插入后加
await new Promise(r => setTimeout(r, 0))，让出主线程，保持滚动/输入响应 - 服务端返回 JSON，前端按
offset+pageSize切片，别.map()全量渲染 - 需要 XSS 防护时，用轻量函数如
escapeHtml()处理字段，别引入重型 sanitizer - 必须预设每行高度（或缓存动态高度），否则无法精确计算滚动偏移和占位高度
- 别手写
scroll监听 +innerHTML替换：用virtuoso（Vanilla/TS）或react-window（React），它们已处理 IntersectionObserver 回退、键盘导航、焦点管理 - 禁用
will-change: transform在滚动容器上——现代浏览器对表格内部元素做该声明反而触发强制图层提升，吃内存 - 后端返回原始数组时，前端别
.map()全量渲染；先切片，再喂给虚拟滚动器
一次性 innerHTML 渲染大表格为什么必卡
不是 JS 慢，是浏览器在 DOM 构建阶段被压垮：字符串解析 + 节点创建 + 回流计算全堆在一次调用里。哪怕你用 document.createElement 单个追加，5000 次 appendChild 也照样假死。
立即学习“前端免费学习笔记（深入）”；
虚拟滚动不是加 overflow:auto 就完事
只给容器设 display: block 和 overflow-y: auto，DOM 节点还在那儿，浏览器照常解析布局——对 200 行以上毫无意义。
最容易被忽略的点是语义结构残缺：<thead> 和 <code><tbody> 缺一不可。没有它们，浏览器无法对表头做合成层提升，滚动时整个表格重绘；没有 <code>scope 或 headers，屏幕阅读器强制遍历所有单元格关联行列，JS 查找也变慢——所有优化都白做。
