table-layout: fixed 必须显式设置，否则浏览器用auto模式逐行扫描内容计算列宽导致主线程卡顿150ms+；设为fixed后仅依据首行或width属性快速确定列宽，并需搭配预设宽度、documentfragment分批插入、虚拟滚动控制真实dom数量及完整语义结构。
table-layout: fixed 必须显式设置，否则列宽计算卡主线程
不设 table-layout: fixed，浏览器默认用 auto 模式，会逐行扫描所有 <td> 内容（含长文本、未限制宽的图片）来算列宽——500 行 × 15 列的表格，光这一项就能卡住主线程 150ms+。设成 <code>fixed 后，浏览器只看第一行或 <col>，列宽瞬间确定。
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在
<table> 标签上直接写内联样式：<code>style="table-layout: fixed; width: 100%;"，别指望 reset.css 或父级继承 - 必须搭配
<col>预设宽度，例如：<col style="width: 120px"> <col style="width: auto"> <col style="width: 80px"> - 禁用
<th> 或 <code><td> 上的 <code>width属性和style.width，它们不参与fixed计算，纯属干扰 - 响应式列宽改用
@media控制<col>的width，不是在单元格里写min-width - 用
DocumentFragment批量构建，每 500–1000 行插入一次 - 每批插入后加
await new Promise(r => setTimeout(r, 0))，让出主线程，保持输入/滚动响应 - 服务端返回 JSON，前端控制节奏；坚决不用 jQuery.html() 或原生
innerHTML = str - 若需 XSS 防护，用轻量函数如
escapeHtml()处理字段，别引入重型 sanitizer - 禁用
will-change: transform在滚动容器上——现代浏览器对表格内部元素做该声明反而触发强制图层提升，增加内存开销 - 后端返回原始数组时，前端别直接
.map()渲染；先按当前offset+pageSize切片，再生成 DOM
避免 innerHTML 一次性渲染，改用 DocumentFragment 分批插入
一次性 innerHTML = hugeString 渲染 5000 行，不是 JS 慢，是浏览器在 DOM 构建阶段被压垮：字符串解析 + 节点创建 + 回流计算全堆在一次调用里。哪怕用 document.createElement 单个追加，5000 次 appendChild 也照样卡顿。
实操建议：
虚拟滚动不是加 overflow:auto 就完事，必须控制真实 DOM 数量
只给容器设 display: block 和 overflow-y: auto，DOM 节点还在那儿，浏览器照常解析布局——对 200 行以上毫无意义。真正有效的虚拟滚动，是只渲染视口内 ±1～2 屏的数据行，其余用占位 <tr> 填充高度。
<p>实操建议：</p>
<ul>
<li>必须预设每行高度（或使用动态高度缓存），否则无法精确计算滚动偏移</li>
<li>不要自己手写滚动监听 + 重渲染；用成熟方案如 <code>virtuoso（Vanilla/TS）或 react-window（React），它们已处理好 IntersectionObserver 回退、键盘导航、焦点管理
语义结构不完整会让性能优化白做
没 <thead>、<code><tbody> 分层，浏览器就无法对表头做合成层提升，滚动时整个表格重绘；没 <code>scope 或 headers，屏幕阅读器强制遍历所有单元格关联行列，JS 操作也变慢。
实操建议：
- 哪怕只有 1 行表头，也必须包在
<thead> 里，主体数据进 <code><tbody><li><code><th> 必须带 <code>scope="col"（列头）或scope="row"（行头），不能只靠视觉加粗 - 每次动态更新
<tbody>（比如筛选、排序），要重新补全 <code>headers属性，否则无障碍支持断裂 - 禁用「无限滚动」式分页加载表格——它让分页控件失效、无法跳页、破坏浏览器前进/后退，且用户无法预估总数据量 关键点在于：所有优化手段都依赖
table-layout: fixed 这个开关是否真正生效，以及你是否真的控制了 DOM 节点数量——而不是在字符串拼接或 CSS 动画上反复调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
