浏览器缓存策略：Cache API 与 HTTP 缓存

缓存是性能优化里投入产出比最高的一环。本文把浏览器的缓存机制分层拆解，帮你设计一套可维护的缓存策略。

缓存的三个层次

浏览器缓存从内到外大致分三层：

1. 内存缓存：进程内的临时缓存，命中最快但易失效；
2. HTTP 缓存：基于请求头的协商缓存，跨会话可用；
3. Service Worker Cache：可编程的持久缓存，最强也最需谨慎。

HTTP 缓存：强缓存与协商缓存

强缓存通过 Cache-Control 控制，浏览器直接复用而不发请求：

Cache-Control: max-age=31536000, immutable

协商缓存通过 ETag / Last-Modified 校验，浏览器带条件请求，服务器返回 304 表示未变。

实践中常用「哈希文件名 + 长缓存」策略：内容变化则文件名变化，天然绕过缓存失效问题。

Service Worker 与 Cache API

Service Worker 让你用代码完全掌控缓存：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

配合 Workbox 等库，可以轻松实现预缓存、运行时缓存与版本管理。

策略选择

• 静态资源（带哈希的 JS/CSS）→ Cache-First + 长缓存；
• HTML 入口 → Network-First，保证拿到最新；
• API 数据 → Stale-While-Revalidate，兼顾速度与新鲜度。

结语

缓存策略没有统一答案，取决于资源性质与业务容忍度。关键是为每一类资源明确选择一种策略，而不是一刀切。