WebSocket 实现库存实时更新与预警，需建立带指数退避重连的稳定连接、解析结构化 JSON 消息、分层轻量提醒，并通过 requestIdleCallback 和视口优化保障性能。
WebSocket 是 HTML5 提供的全双工通信协议，特别适合库存这类需要低延迟、高频率更新的业务场景。相比轮询或长轮询，它能真正实现服务端主动推送，让库存数字实时“活”起来，同时在库存低于阈值时即时触发预警提醒。
建立稳定可靠的 WebSocket 连接
连接是实时功能的基础。前端需做好重连机制和状态管理，避免因网络抖动或服务重启导致断连后数据停滞。
- 使用带指数退避的自动重连（如首次 1s，失败后 2s、4s、8s… 最大不超过 30s）
- 连接成功后立即发送身份标识（如 warehouseId 或 sessionId），便于服务端识别归属并下发对应库存数据
- 监听 onclose 和 onerror 事件，记录日志并触发 UI 提示（如“连接已断开，正在重试…”）
结构化库存消息格式与解析逻辑
服务端推送的消息必须清晰、可扩展。推荐采用统一 JSON 格式，包含操作类型、商品 ID、当前库存、预警状态等字段，前端按 type 分发处理。
- 示例消息：{"type":"update","sku":"SKU-2024-001","stock":12,"minStock":10,"timestamp":1717023456}
- 前端收到后先校验 type 和必要字段，再更新对应 DOM 元素（如
document.getElementById('stock-2024-001').textContent = 12） - 对 stock 的条目，添加红色边框或闪烁动画，并防止重复弹窗（可用 Set 记录已提醒的 SKU）
前端预警提醒的轻量级实现
预警不等于频繁打扰。应分层提示：页面内视觉反馈 + 可选声音 + 非侵入式通知，由用户控制开关。
立即学习“前端免费学习笔记（深入）”；
- 视觉层：库存单元旁显示 ⚠️ 图标，数字变红；支持点击展开详情（如最近三次出入库记录）
- 声音层：仅首次低于阈值时播放简短提示音（需用户交互后才允许 audio 播放，符合浏览器 autoplay 策略）
- 通知层：调用 Notification API，但须提前请求权限，并限制每小时同 SKU 最多提醒 1 次
兼顾性能与用户体验的细节优化
当库存列表达数百项时，盲目刷新或频繁重绘会影响流畅度。需针对性做减法。
- 使用 requestIdleCallback 延迟非关键更新（如统计汇总栏），避免阻塞主线程
- 对未在视口内的库存行，暂不渲染预警动画，滚动进入后再激活
- 服务端按需推送：只推变更项，而非全量快照；前端用 Map 缓存最新值，对比 diff 后再更新 UI
