浏览器缓存机制

问题

浏览器有哪几种缓存，各种缓存的优先级是什么样的？

解答

缓存类型

1. Service Worker 缓存

Service Worker 是运行在浏览器后台的 JavaScript 脚本，可以拦截和处理网络请求，实现离线访问和自定义缓存策略。

// 注册 Service Worker
navigator.serviceWorker.register('/sw.js');

// sw.js 中拦截请求
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

2. 强制缓存

通过 HTTP 响应头控制，浏览器直接使用本地缓存，不发起请求。

Cache-Control: max-age=3600
Expires: Wed, 21 Oct 2025 07:28:00 GMT

3. 协商缓存

浏览器向服务器发送条件请求，服务器判断资源是否更新。

# 请求头
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

# 响应头
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

如果资源未更新，服务器返回 304 Not Modified，浏览器使用本地缓存。

4. Web Storage

用于存储键值对数据，不是传统意义上的 HTTP 缓存。

// localStorage - 持久化存储
localStorage.setItem('key', 'value');

// sessionStorage - 会话级存储
sessionStorage.setItem('key', 'value');

优先级顺序

1. Service Worker 缓存（最高）- 可完全控制网络请求，覆盖其他缓存
2. 强制缓存 - 缓存未过期时直接使用，不发送请求
3. 协商缓存 - 强制缓存失效后，向服务器验证资源是否更新
4. Web Storage（最低）- 仅作为数据存储，不参与 HTTP 缓存流程

关键点

• Service Worker 拥有最高优先级，可拦截所有网络请求并自定义缓存策略
• 强制缓存通过 Cache-Control 和 Expires 控制，命中后不发送请求
• 协商缓存通过 ETag 和 Last-Modified 验证，返回 304 时使用本地缓存
• Web Storage 是数据存储方案，不是 HTTP 缓存机制