动态表格懒加载需通过fetch+tbody替换实现，而非loading="lazy"；初始化仅渲染前20行，滚动接近底部时请求并替换tbody内容，同时维护语义完整性与tfoot合计逻辑。
动态表格的数据懒加载不是加个 loading="lazy" 就能解决的——它只对 <img> 和 <iframe></iframe> 生效，对 <table> 里的 <code><tr> 或 <code><td> 完全无效。真正可行的方案，是控制数据请求时机 + 合理维护 DOM 结构语义。
<h3>为什么 table 标签本身不支持懒加载</h3>
<p>HTML 的 <code>table 是静态渲染结构，浏览器解析时就一次性构建整个 DOM 树。即使你把几百行 <tr> 包在 <code><tbody> 里，它们仍会在首屏加载时全部解析、布局、渲染——和写死 HTML 没区别。
<ul><li>
<code>loading="lazy" 属性对 <table>、<code><tr>、<code><td> 等标签无任何效果，浏览器直接忽略
<li>试图用 CSS <code>display: none 隐藏后续行，只是视觉隐藏，DOM 仍在内存中，无法降低初始渲染开销
<tr>），等于把懒加载责任推给了后端，前端完全失控
<h3>用 fetch + tbody 替换实现真懒加载</h3>
<p>核心是：只在用户滚动接近底部时，才请求下一页数据，并仅替换 <code><tbody> 内容，保留 <code><thead> 和 <code><tfoot> 不变，维持语义完整性。
<ul><li>初始化时 <code><tbody> 只放前 20 行，<code><tfoot> 显示“正在加载…”或占位符
<li>监听 <code>window.onscroll 或用 IntersectionObserver 观察 <tbody> 最后一行是否接近视口底部
<li>请求成功后，用 <code>tbody.innerHTML = newRowsHtml 替换内容（注意：必须确保 newRowsHtml 是纯 <tr><td>…</td></tr>，不含 <tbody> 标签）
<li>失败时不要清空已有内容，应在 <code><tfoot> 中插入错误提示，如 <code><tr><td colspan="3">加载失败，请重试</td></tr>
+=），会导致已绑定事件丢失；统一用替换而非追加，更可控语义化行维护的关键细节
动态更新 <tbody> 时，若忽略语义规则，会破坏可访问性与 SEO 解析逻辑。
<ul><li><code><th> 必须只出现在 <code><thead> 或带 <code>scope 属性的 <td> 中；动态插入的行里不能出现孤立 <code><th>
<li>每行 <code><tr> 必须有明确列数，与 <code><thead> 的 <code><th> 数量一致；否则屏幕阅读器会误读表头关联
<li>如果某列需要 <code>headers 属性（如跨行汇总单元格），必须在 JS 插入时显式设置，不能依赖初始 HTML
aria-rowindex 和 aria-colindex 对长表格做辅助标记，尤其当启用虚拟滚动时，原生 DOM 索引已失效innerHTML 注入含 <script></script> 的 HTML 片段——脚本不会执行，且存在 XSS 风险；如需行为，应统一用事件委托绑定最易被忽略的是：动态替换 <tbody> 后，<code><tfoot> 的合计逻辑必须同步重算，且要防重复触发。别指望浏览器自动维护，这得你用 JS 显式更新——否则用户看到的“总计”永远停留在第一页数据上。</tfoot>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
