HTML表格本身不实时，需JS驱动更新；应单单元格精准更新、响应式适配、批量调度、断连冻结数据并视觉提示。
用 <table> 渲染股票行情，但别指望它自己“实时”
HTML 表格本身是静态结构，<table> 不会自动拉数据、不会重绘、更不会处理 WebSocket 或轮询。所谓“实时”，全靠外部 JS 驱动——表格只是最终的展示容器。直接写死 <tr><td>6.28</td></tr> 没意义，关键在怎么把新价格塞进对应 <td> 里。
常见错误：把所有行情数据拼成 HTML 字符串再 innerHTML = ... 整表替换。这会导致 DOM 重排、丢失焦点、破坏已绑定事件（比如某列的点击查看详情），且滚动位置会跳。
- 优先更新单个单元格：
document.querySelector('[data-symbol="AAPL"]').querySelector('.price').textContent = '192.45'; - 用
data-属性标记关键字段，如data-symbol、data-field="change"，避免依赖固定索引 - 对频繁变动字段（如价格、涨跌幅）单独加 class，例如
class="price live-updated"，方便 CSS 做微动效或颜色过渡
响应式排版：小屏下别硬撑一整行
桌面端显示 8 列（代码、名称、最新价、涨跌、涨跌幅、成交量、最高、最低）很常见，但手机上横向滚动体验极差，用户根本不愿拖。强行用 overflow-x: auto 只是掩盖问题，不是解法。
- 用媒体查询 +
display: block把每只股票转为垂直卡片：@media (max-width: 768px) { .stock-row { display: block; } .stock-cell { display: block; width: 100%; } } - 关键字段（如代码、最新价、涨跌幅）保留，非核心列（如换手率、市盈率）设为
display: none或折叠进「详情」按钮 - 避免用
table-layout: fixed配百分比宽度——小屏下文字折行会撑破列宽，改用table-layout: auto让浏览器按内容自适应
性能瓶颈常出在 DOM 更新频率和重绘范围
行情推送频率可能是每秒多次，如果每次更新都触发一次 getBoundingClientRect() 或读取 offsetHeight，JS 主线程立刻卡住。更隐蔽的问题是 CSS 动画连带重绘：给 .price 加 transition: color 0.3s 没问题，但若同时对整个 <tr> 加 opacity 动画，每次更新都会触发全行重绘。
立即学习“前端免费学习笔记（深入）”；
- 批量更新：收集 100ms 内所有变更，合并后一次性 DOM 操作，用
requestIdleCallback或setTimeout(..., 0)调度 - 用
will-change: transform提前告知浏览器哪些元素会动，但仅限真正高频更新的单元格，别滥用 - 避免在更新逻辑里调用
console.log输出完整对象——V8 在 DevTools 开着时，日志序列化开销极大，实盘环境可能降速 30%
WebSocket 断连后，表格状态不能“假死”
断连时常见做法是清空表格或显示「连接中…」，但用户正盯着某只股票看，突然所有数字变为空或 loading，体验断裂。更合理的是冻结最后有效值，并视觉提示异常状态。
- 记录每个 symbol 的最后成功更新时间戳，定时检查是否超 5 秒未更新
- 对超时单元格添加 class
stale，CSS 设置color: #999; border-left: 2px solid #ff6b6b; - 不隐藏原始数据，也不覆盖为
-，保留数字并加轻微透明度：opacity: 0.7; - WebSocket 重连成功后，用 diff 对比新旧数据，只更新真正变化的字段，避免无意义重绘
真正的难点不在怎么画表格，而在如何让几十个动态字段在高频率、低延迟、多设备场景下保持可读、可交互、不卡顿——DOM 操作粒度、状态同步时机、断连恢复策略，每一处都得拿真实行情流压测才能定案。
