HTML表格实时更新需分通信机制、更新粒度、错误兜底三方面处理：1. 通信上避免setInterval堆叠请求，改用setTimeout链式调用并加loading锁；2. DOM更新禁用innerHTML，应比对ID复用节点、分项赋值、固定布局；3. WebSocket需带版本号幂等过滤，通过queueMicrotask更新并校验连接状态。
直接用 fetch() 拉完数据就 innerHTML = newTableHTML，90% 的场景下会出问题：卡顿、丢焦点、输入法崩溃、重复请求、状态错乱。真要稳定同步，得按通信机制、更新粒度、错误兜底三块拆开处理。
轮询该不该用？看清楚 setInterval 和 setTimeout 的区别
很多人一上来就写 setInterval(() => fetch('/api/table'), 3000)，结果接口慢一点，多个请求堆叠，DOM 频繁重绘，页面直接卡死。这不是轮询的问题，是调度方式错了。
- 用
setTimeout链式调用，确保上一次请求结束才发起下一次：收到响应或超时后，再setTimeout(fetchNext, delay) - 加个 loading 状态锁：
if (isFetching) return，避免用户手动刷新触发并发请求 - 服务端必须支持
If-Modified-Since或ETag，否则 304 缓存失效，白跑请求 - 移动端慎用 ——
setInterval在后台标签页会被浏览器节流，实际间隔可能拉长到 60s+
response.json() 后怎么安全更新表格 DOM？
拿到新数据不等于能直接塞进 <tbody>。表格里如果有 <input>、contenteditable 或正在编辑的行，粗暴替换会清空用户输入、重置光标位置、破坏输入法上下文（尤其 iOS）。
- 只更新变化的行：用 ID 字段比对新旧数组，
Map存老 DOM 节点，id → <tr>映射复用 - 交互型单元格（如编辑态
<td><input></td>）禁止用innerHTML，改用textContent+dataset+value分别赋值 - 固定表格布局：
table-layout: fixed+ 所有<col>设宽，否则每行插入都触发全表重计算列宽 - 大数据量时启用虚拟滚动，只渲染可视区域 20 行，
scrollTop变化时动态切换<tr>内容
WebSocket 接到消息后，为什么表格还是没更新？
WebSocket 收到数据只是第一步。常见断点在：消息没带唯一标识、前端没做幂等过滤、更新逻辑被节流吞掉、或者 DOM 已被框架接管但没触发 re-render。
立即学习“前端免费学习笔记（深入）”；
- 后端推送必须带
version或timestamp字段，前端用localStorage.getItem('table_version')对比，跳过旧消息 - 不要在
onmessage里直接操作 DOM，先queueMicrotask(() => updateTable(data))，避免和 Vue/React 渲染周期冲突 - 如果用了 React/Vue，确保数据变更走响应式系统 —— 直接改数组索引不会触发更新，要用
setState([...prev, newItem])或ref.value = [...] - 检查 WebSocket 连接状态：
ws.readyState === WebSocket.OPEN，否则缓存消息到 IndexedDB，上线后重放
最常被忽略的是「更新边界」：表格只是视图，它背后连着编辑状态、校验规则、本地暂存、离线队列。同步不是把新数据倒进去就完事，而是判断此刻该不该更新、更新哪一块、更新后谁来接管焦点、失败了往哪回滚。这些逻辑一旦耦合进 fetch().then()，很快就会变成没人敢动的祖传代码。
