replaceChildren()是最稳妥的局部刷新方式，因它不解析HTML、不触发脚本、保留父容器事件监听，且能防XSS；而innerHTML会销毁子节点、丢失事件绑定、清空用户输入、引发XSS与重绘开销。
用 fetch() 拉新数据 + replaceChildren() 更新表格内容，是最稳妥的局部刷新方式。 不要直接改 innerHTML，尤其当表格里有事件监听器或用户输入框时，会丢绑定、清输入、埋 XSS 风险。
为什么不能直接 innerHTML 表格 tbody？
常见错误是写成：document.querySelector('#myTable tbody').innerHTML = newHtml。这看着快，但实际会：
- 销毁所有子节点，已绑定的 click / input 事件全部失效
- 清空用户正在编辑的
<input>或<select></select>的当前值 - 若
newHtml来自服务端且未过滤，<script></script>标签可能被解析执行（XSS） - 浏览器重绘开销更大，尤其表格行数多时
replaceChildren() 怎么安全替换表格行？
它接受 DOM 节点或字符串，不解析 HTML，也不触发脚本，还能保留父容器上已有的事件监听（比如表头排序点击）。
实操步骤：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 后端返回 JSON 数据（不是 HTML），例如：
[{"id":1,"name":"张三","score":92},{"id":2,"name":"李四","score":87}] - 前端用
document.createElement('tr')逐行构建，文本内容用textContent设置（防 XSS） - 最后调用
tbody.replaceChildren(...rows)替换全部行
示例片段：
const tbody = document.querySelector('#myTable tbody');
fetch('/api/scores')
.then(r => r.ok ? r.json() : Promise.reject(r.status))
.then(data => {
const rows = data.map(item => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.id}</td>
<td><span class="name">${item.name}</span></td>
<td>${item.score}</td>
`;
// 若需绑定新按钮事件，这里单独加：tr.querySelector('.name').addEventListener('click', ...)
return tr;
});
tbody.replaceChildren(...rows);
});
表格分页/筛选时怎么避免重复请求？
用户手快连点「下一页」或反复切换筛选条件，容易发一堆并发请求，后端响应乱序导致界面显示错乱。
- 加请求锁：
let isFetching = false;，发起前判断并设为true，finally里重置 - 用
AbortController主动取消上一个未完成的请求 - 对 URL 参数做浅比较（如
JSON.stringify({page:2,filter:'active'})），相同则跳过新请求 - 按钮点击后立即禁用，加载完成后恢复：
btn.disabled = true→btn.disabled = false
实时更新表格要不要用 WebSocket？
只在以下情况才值得引入：
- 数据每秒变动多次（如交易行情、监控指标）
- 用户必须看到“秒级”变化，不能容忍 2–3 秒轮询延迟
- 后端已支持 WebSocket 推送，且连接管理稳定
否则，用 setInterval(() => fetch(...), 5000) 做轮询更轻量、兼容性更好。注意加节流：如果上一次请求还没结束，这次跳过，别堆积请求。
真正容易被忽略的是：表格列宽、排序状态、滚动位置这些 UI 状态，在局部刷新后得手动保存和恢复。比如用户刚拖过某列宽度，刷新后得用 localStorage 记住并重设，否则体验断层。
