推荐使用EventSource（SSE）或WebSocket实现实时物流消息推送，禁用轮询；优先选EventSource（轻量、兼容好、单向），需后端支持text/event-stream；WebSocket适用于需双向通信的场景。
物流消息怎么从后端推到前端页面
纯 HTML 无法主动接收数据，必须靠 JS 建立连接。常见方案就两个：EventSource（SSE）和 WebSocket，别用轮询——延迟高、服务器压力大、用户卡顿感明显。
选 EventSource 的前提：物流状态变更不频繁（比如每分钟最多 1–2 次）、不需要双向通信、后端能保持长连接。它比 WebSocket 更轻量，兼容性也好（Chrome/Firefox/Safari 都支持，IE 不行但已可忽略）。
选 WebSocket 的场景：要实时显示“已揽件→在途中→派送中”连贯动画，或需前端触发查询（如点击“刷新物流”），这时得双向通信。
-
EventSource的 URL 必须是同源的，或服务端配好Access-Control-Allow-Origin - 后端响应头必须含
Content-Type: text/event-stream和Cache-Control: no-cache，否则 Chrome 会缓存并断连 - 每次推送数据以
data:开头，结尾用两个换行符\n\n，少一个就解析失败 - 如果物流接口返回的是 JSON 字符串（如
{"time":"2026-04-16T10:22","status":"已签收"}），前端要用JSON.parse(event.data)解析，别直接当字符串用
如何把物流消息渲染成时间轴样式
不用 JS 拼 DOM，先用语义化 HTML 打底，再让 CSS 控制视觉效果。核心是 <ol> + <li> + <time>，不是一堆 <div> 堆出来的。
立即学习“前端免费学习笔记（深入）”；
每个物流节点必须包裹 <time datetime="ISO8601">，比如 <time datetime="2026-04-16T10:22:35+08:00">2026-04-16 10:22</time>。这样屏幕阅读器能读出时间，搜索引擎也能识别顺序，移动端缩放时字体和圆点也不会错位。
-
<ol>父容器必须设position: relative，否则伪元素::before画的垂直线会跑偏到页面顶部 - 圆点用
border-radius: 50%+background实现，大小统一用0.75em，别用px——用户调大系统字体时，红点才不会和文字脱节 - Safari 对
flex+align-items: center下的伪元素定位不稳定，改用display: grid或显式写top: 50%; transform: translateY(-50%) - IE11 不支持
gap，最后一个<li>要加margin-bottom: 0，不然底部多一截空白
物流消息来了，怎么避免重复渲染或错乱
物流接口可能重发、乱序、或网络抖动导致重复推送。不能拿到一条就 appendChild 一条，得做去重和排序。
关键看后端是否提供唯一标识字段。理想情况是每条物流记录带 trace_id 或 logistics_no + time 组合，前端用 Set 或 Map 缓存已处理的 ID；如果没有，至少用 time 字段做简单去重（new Date(event.data.time).getTime()），再按时间倒序插入。
- 不要用
innerHTML += ...拼接，会重绘整个列表，卡顿明显；用document.createElement+insertBefore插入到顶部最旧的位置 - 如果物流项超过 20 条，建议只保留最近 10 条，老数据折叠进「展开历史」按钮里，避免 DOM 过大拖慢页面
- 监听
eventSource.onerror，连接断开时自动重试（但别无限重连，加个指数退避，比如第一次 1s，第二次 2s，第三次 4s） - 收到新消息后，别立刻滚动到底部——用户可能正在看中间某条，用
scrollIntoView({ block: 'nearest' })更友好
小红点怎么和物流消息联动
右上角小红点不是独立功能，它是物流状态变更的副产品。只要物流有未读更新（比如“已发货”还没被用户看到），就显示红点；用户点开物流面板后，清空红点并标记为已读。
逻辑很简单：用一个布尔值 hasUnreadLogistics 控制红点显隐，配合 textContent 更新数字。别用 class 切换加动画来“模拟未读”，那只是视觉障眼法，实际状态没同步。
- 红点容器（如
<span class="badge">）必须设position: absolute，父级<div class="notification-trigger">设position: relative，否则定位失效 - 数字大于 99 就显示
"99+"，别让红点撑开布局；数字为 0 时，用display: none或移除元素，别留空格 - 如果物流页是单页应用（SPA），注意路由切换时重置红点状态，否则从订单页跳过来还带着旧红点
- 别在
onmessage里直接操作 DOM 更新红点——先更新状态变量，再用requestAnimationFrame批量提交，防抖卡顿
真正难的不是画出那条时间线或弹个小红点，而是保证每条物流消息在弱网、重连、重复推送、用户反复进出页面这些边界条件下，状态始终一致。别省略去重逻辑，也别把时间格式校验交给后端——前端拿到 time 字段第一件事就是 new Date().toISOString() 转一次，再塞进 <time datetime="">，否则 Safari 里时间戳可能不显示。
