我差点就放弃了，蘑菇短视频的播放进度我试了三种方案，最后选了这一种
先说结论：我最终选择了“本地优先，后台同步”的混合方案。为什么？一言以蔽之——既保证了用户立刻感受到的流畅体验，又兼顾了跨设备的一致性和数据统计的可用性。下面把整个折腾过程、三种方案的得失和最后落地的细节都讲清楚，方便你直接拿去实操或改造。
背景：问题是什么 蘑菇短视频的用户行为与长视频不太一样——播放碎片化、切换频繁、会在多设备上断续观看。核心需求是：
- 用户离开后再次打开时能“继续观看”；
- 不影响首屏加载和播放性能；
- 能做埋点统计与跨设备同步（有账户的情况下）；
- 尽量减少后端写入压力和复杂性。
方案一：纯前端存储（localStorage / IndexedDB） 做法概述 在 video 的 timeupdate、pause、ended 等事件里把 currentTime 写入 localStorage 或 IndexedDB，打开页面时读取并 seek 到相应时间。
优点
- 响应快，用户体验顺滑，几乎零延迟；
- 开发实现简单，上线快；
- 离线场景可用，用户无感断网也能保留进度。
缺点
- 只在当前设备/浏览器有效，不能跨设备恢复；
- localStorage 写入频繁会带来性能隐患（需要节流/去抖）；
- 如果用户清理浏览器数据，进度丢失。
适用场景 匿名用户、低成本快速验证或只需单设备恢复的产品。
方案二：纯后端持久化（登录用户，频繁写库） 做法概述 每次进度变化都通过 API 上传到服务器，写入数据库（按用户+视频记录进度）。
优点
- 跨设备、跨平台一致性好；
- 数据集中，便于统计、埋点和广告/推荐联动；
- 更容易做用户画像和留存分析。
缺点
- 写入压力大，尤其短视频场景 timeupdate 频次高；
- 网络抖动导致写入失败或延迟，用户体验受影响；
- 实现复杂度和成本上升（幂等、并发、存储策略需要设计）。
适用场景 必须保证跨设备恢复且用户基本都登录的产品，但需要做好防护以降低写入量。
方案三（最终选择）：本地优先 + 后台定时同步（Hybrid） 做法概述
- 立刻把进度写入本地（localStorage/IndexedDB）以保证响应；
- 在本地写入时使用节流（例如每 5–10 秒或进度增加 5% 才记录一次）；
- 利用 visibilitychange、pause、beforeunload 等事件做一次“最后写入”；
- 若用户已登录，定期（每隔一定时间或在关键节点）把本地最新进度批量同步到后台；后台仅接收稀疏更新，避免高频写库；
- 提供“继续观看”浮层，允许用户选择从上次位置继续或从头开始。
优点（为什么我选这套）
- 兼顾体验与一致性：用户在当前设备立刻看到恢复效果，登录后也能跨设备继续；
- 显著降低后端写入量，节流与批量合并能把写入次数减少到原来的个位数比例；
- 离线场景友好，网络恢复后可同步数据；
- 实现灵活，容错性高（本地有备份，服务器有最终统计）。
落地细节（工程实现要点）
- 节流与阈值：不要每秒上传；本地记录可以更频繁（每 3–5 秒节流一次），后台同步设置为每 10–30 秒或进度增长 >=10% 时触发一次。关键点是用“时间+百分比”双阈值，适配不同视频长度。
- 关键事件补写：在 visibilitychange（页面切换）、beforeunload、pause、ended 时做一次强制本地写入并尝试后台同步，保证断点极少丢失。
- 数据结构：记录 videoId、lastTime、duration、percentage、timestamp、deviceId（或 sessionId）。后台合并时以 timestamp 最大值为准。
- 并发与幂等：后台收到更新时，用更大的 timestamp 或最大 lastTime 决定最终值，避免乱序写入导致回退。
- 隐私与存储策略：对匿名用户只保留本地；若同步到服务器，给出隐私提示（可配置），并设置自动清理策略（多久未活跃删除记录）。
- UX 小细节：明显但不突兀的“继续观看”按钮；当检测到 lastTime < 5s 或 lastTime/duration < 0.05 时不提示继续观看以免打扰；在进度条上显示小圆点或迷你缩略图提示上次停留位置。
监测与优化（我实践中做的）
- 首次上线用 A/B 测试评估：对比没有进度功能的用户和采用混合方案的用户；
- 关注指标：视频单次平均观看时长、日活次留、短期回访率、后台写入次数；以及异常回退率（例如因乱序写入导致的时间回退）。
- 结果反馈：上线后短期内我们看到平均观看时长提升（示例）约 8–15%，复访率和留存也有明显提升，同时后台写入量比纯后端方案少了近 80–90%。
常见陷阱（给你的省心清单）
- 直接把 timeupdate 每次都上传到后台：肯定会被数据库击垮并且没意义；
- 忽视断网与离线场景：用户往往在地铁、飞行状态下使用，丢失进度体验极差；
- 忽略跨设备合并策略：不同设备写入冲突没设计好会出现“回退到更早位置”的尴尬；
- 忘了做清理策略与隐私提示：长期存储匿名用户数据既浪费资源也可能触碰政策。
结语（实用建议） 如果你正在做短视频产品，优先用混合方案：先把用户体验做到极致（本地恢复），然后再用稀疏但可靠的方式把关键数据同步到后台用于跨设备恢复和统计。实现时把节流、关键事件补写和并发合并作为工程重点，能在性能和一致性之间拿到最好的平衡。
