table-layout: fixed 需同时满足显式 width、至少一列设宽、禁用 white-space: nowrap 才生效；邮件客户端不支持需降级；大数据量表格应局部渲染、事件委托、金额整数存储防浮点误差。
table-layout: fixed 必须显式声明且配齐三要素
不设 table-layout: fixed，浏览器默认用 auto 模式逐行扫描所有 <td> 内容算列宽，500 行表格光这一步就卡主线程 150ms+。但只写这个属性没用，它生效依赖三个硬性条件：
<ul><li><code><table> 必须有显式 <code>width（如 style="width: 100%" 或 width="600"），不能是 auto 或未设置
<col> 指定宽度，例如 <col style="width: 120px">；<th> 或 <code><td> 上的 <code>width 属性会被忽略
<td> 不能设 <code>white-space: nowrap，否则内容溢出而非压缩，列宽控制失效
Outlook 等邮件客户端完全不支持该属性，若用于 HTML 邮件，需提前降级处理。
动态更新别碰 innerHTML，改用 dataset + 单元格级替换
一次刷新涉及上百单元格时，整表 innerHTML = newHTML 会触发完整重排重绘，界面明显卡顿。真实生产环境应只更新变动单元格：
- 在
<td> 上用 <code>data-price="1299"、data-updated="1715643210"存原始值和时间戳，JS 对比新旧值再决定是否更新 - 批量 DOM 操作先 append 到
DocumentFragment，最后一次性替换tbody下对应子节点 - 避免在循环中反复读取
offsetHeight等布局属性；若需重算行高，统一放进requestAnimationFrame回调
大数据量下局部渲染比隐藏更有效
用 display: none 或 visibility: hidden 控制表格行显隐毫无性能改善——DOM 节点仍在内存里，浏览器照常计算布局。真正有效的做法是只把当前页的 <tr> 插入 DOM：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>分页数据用 <code>data.slice(start, end) 提前截取，map() 生成纯字符串片段，再一次性赋给 tbody.innerHTML
tbody 的 click，用 e.target.closest('tr') 定位目标行<tr>
<h3>金额计算必须整数存储，防浮点误差</h3>
<p>前端直接用小数做加减乘除，极易出现 <code>0.1 + 0.2 === 0.30000000000000004 这类问题。航空票务、财务报表等场景必须规避：
- 所有金额以“分”为单位存为整数（如 ¥1299.00 存为
129900） - 显示时再转回小数：
(value / 100).toFixed(2)，注意toFixed返回字符串 - 大宗计算可用
BigInt：Number((BigInt(a) + BigInt(b)) / 100n)，但需确保输入已是整数分
最易被忽略的是：后端返回的金额字段若带小数，前端必须立刻乘 100 并 Math.round，不能留到计算时再转——浮点误差会在第一次运算就污染整个链路。
