好家伙，蘑菇影视官网断网重连后我才明白：缓存管理别这样设置

好家伙，蘑菇影视官网断网重连后我才明白：缓存管理别这样设置

那天我在地铁里刷蘑菇影视，网络突然断了。等到站点回到家里，页面竟然还是断网前的旧海报、旧推荐，视频播放卡住还提示“资源已过期”。折腾半天才发现：问题不是播放器，而是缓存策略把网站搞成了“时光机”——把动态内容缓存得太久，结果断网重连后一言不合就展示过期数据。想把你的网站变得更靠谱？先别把缓存当成万能药，下面这些坑和对策值得每个开发/运营团队照单全收。

常见错误（和为什么会翻车）

• 把 HTML 页面设置超长 max-age：导致用户看到的不是最新页面，登录态、推荐位等不会及时更新。
• 静态资源不做版本化：JS/CSS 改了用户仍加载旧文件，功能或样式异常。
• API 响应被 Cache-First 管理：动态数据被缓存，断网重连后无法获取最新数据。
• Service Worker 策略不分场景：对导航请求使用 Cache-First，会把旧页面优先返回。
• 忽略 Vary: Cookie 或者按用户差异返回相同缓存：导致个性化内容走样。

靠谱的缓存管理清单（立刻能用） 1) 页面（HTML）走 Network-first：

• 响应头示例：Cache-Control: no-cache, must-revalidate
• 意思是强制浏览器在缓存前先向服务器校验，保证内容实时性。

2) 静态资源走 Cache-first + 版本化：

• 构建输出文件名带 hash（如 app.abcdef.js），并配合 Cache-Control: public, max-age=31536000, immutable。
• 改动时通过文件名变更让浏览器强制更新，CDN 也能高效缓存。

3) API 数据用短缓存或条件请求：

• Cache-Control: no-store 或 no-cache + 使用 ETag/Last-Modified 做条件请求。
• 对不影响核心体验的接口可以设置短时间缓存（比如 30s）并配合 stale-while-revalidate。

4) Service Worker 策略示例：导航请求优先网络、静态资源优先缓存并后台更新。

• 导航（HTML）建议 Network-first：线上恢复后能拿到最新页面。
• 静态文件建议 Cache-first with revalidation。

5) 离线与重连体验：

• 监听 online/offline 事件，提供显式提示（“当前离线，正在使用缓存内容”）。
• 在重连时触发后台刷新（background sync 或者简单的重试队列）来更新缓存。

6) 个性化内容特别处理：

• 如果内容随 Cookie/Authorization 变化，响应头要设置 Vary: Cookie 或者 Cache-Control: private，避免缓存泄露或错配。

实战小段代码（Service Worker 中的导航处理思路） self.addEventListener('fetch', event => { if (event.request.mode === 'navigate') { // Network-first for page navigations event.respondWith( fetch(event.request).then(res => { caches.open('pages').then(c => c.put(event.request, res.clone())); return res; }) .catch(() => caches.match(event.request).then(r => r || caches.match('/offline.html'))) ); } else { // Static assets: cache-first event.respondWith(caches.match(event.request).then(r => r || fetch(event.request))); } });

其他细节别忽视

• HLS/流媒体清单不要设置过长缓存，分片可缓存但清单要短；Range 请求配合 CDN 能降低延迟。
• 使用 stale-if-error 或 stale-while-revalidate 可以在服务器短暂不可用时改善体验。
• 做好 CDN 缓存清理与回滚流程，避免紧急补丁发布时全站旧资源残留。
• 对移动端用户友好：当断网时尽可能保留播放进度和已缓存的海报/章节列表，减少失望感。