库存实时更新需事件驱动而非轮询，优先用SSE监听stock-updated事件，失败时退化为操作触发+3次短轮询；可视化需value为整数、CSS状态选择器控制样式、重置Safari appearance；缺货时禁用按钮并设aria-disabled，文案引导动作；数据源信任链须在初始化阶段明确版本优先级。
库存显示不能只靠后端吐个数字然后静态渲染——用户加购、别人下单、后台补货都会导致库存瞬变，前端必须能感知变化并及时反馈，否则“显示有货却提交失败”会直接损失转化。
用 <progress></progress> 标签做可视化库存条
比纯文字“剩余 87 件”更直观，且原生支持语义化和无障碍。关键不是画得好看，而是值更新时 DOM 响应要准：
-
value必须是整数，且不能超过max；若后端返回stock: 87.5，前端得先Math.floor()或四舍五入，否则<progress></progress>会忽略小数部分 - 颜色区分状态需用 CSS 属性选择器，比如
progress[value="0"] { background: #dc3545; }，别用 JS 动态加 class——避免 class 名冲突或遗漏清理 - 移动端 Safari 对
<progress></progress>的appearance支持不一致，必须重置：progress { -webkit-appearance: none; appearance: none; }
库存数字实时更新靠事件驱动，不是轮询
用户在详情页停留时，库存可能被其他渠道改掉。但每秒发请求查库存既浪费资源又易被限流。正确做法是让后端推送变更信号：
- 优先用
EventSource接服务端发送的 SSE（Server-Sent Events），监听stock-updated类型事件，payload 含product_id和新stock值 - 若 SSE 不可用（如老旧 CDN 拦截），退化为「操作触发 + 短期轮询」：用户点击“加入购物车”后，立即查一次库存；若失败，启动最多 3 次、间隔 500ms 的重试，成功即停
- 绝对不要在页面 onload 后就开 setInterval 每 5 秒轮询——用户切到别的 tab 时还在发请求，既耗电又无效
库存为 0 时的交互降级必须明确
“缺货”不是视觉样式问题，而是功能开关。很多页面只把按钮变灰，但没禁用 click 事件，用户仍可点，然后弹个“库存不足”的提示，体验割裂：
立即学习“前端免费学习笔记（深入）”；
- 库存 ≤ 0 时，移除按钮的
onclick属性，同时设disabled并加aria-disabled="true" - 按钮文案不能只写“缺货”，要带动作引导，比如“到货通知”——并确保这个按钮真能注册订阅，而不是摆设
- 如果商品支持预售或预约，库存字段旁必须显式标出
data-stock-type="preorder"，让 JS 逻辑分支清晰，避免把“0 件可预约”和“0 件已售罄”混为一谈
最常被忽略的是库存数据来源的信任链：前端展示的数字，到底是来自初始 HTML 的 data-stock="87"，还是来自某次 API 响应，抑或是 SSE 推送？三者时间戳和版本号不一致时，以谁为准，必须在 JS 初始化阶段就定死策略，不能靠“哪个来得晚就用哪个”。
