浏览器缓存机制总结

1. 缓存类型

• 内存缓存 (Memory Cache)

  • 特点: 快速读取，生命周期短（随页面关闭释放）。
  • 适用场景: 高频访问的静态资源（如CSS、JS、图片）。
  • 优先级: 最高，但受限于内存大小。

• 磁盘缓存 (Disk Cache/HTTP Cache)

  • 特点: 持久化存储，跨会话可用，容量较大。
  • 控制字段: Cache-Control、Expires、ETag、Last-Modified。
  • 策略: 强缓存（直接使用本地资源）和协商缓存（验证后决定是否使用缓存）。

• Service Worker 缓存

  • 特点: 开发者可控，支持离线缓存，可编程拦截请求。
  • 注意事项: 处理跨域资源需配置CORS，避免缓存不透明响应（opaque response）。

---

2. 缓存策略

• 强缓存

  • 字段: Cache-Control（优先级高）和 Expires。
  • 行为: 直接使用本地缓存，不发送请求。
  • 示例:
    http

    Copy Code

    1Cache-Control: max-age=3600  # 资源有效期为1小时

• 协商缓存

  • 字段: ETag（优先级高）和 Last-Modified。
  • 行为: 发送请求验证资源是否更新，返回304（未修改）或新资源。
  • 示例:
    http

    Copy Code

    1ETag: "xyzzy"
    2Last-Modified: Mon, 15 Jan 2024 12:00:00 GMT

---

3. Service Worker 缓存控制

• 策略示例:

  • Cache First: 优先使用缓存，失败再请求网络。
  • Network First: 优先请求网络，失败使用缓存。
  • 示例代码 (Workbox):
    javascript

    Copy Code

    1workbox.routing.registerRoute(
    2  /\.(?:js|css)$/,
    3  new workbox.strategies.CacheFirst({
    4    cacheName: 'static-resources',
    5    plugins: [
    6      new workbox.expiration.ExpirationPlugin({
    7        maxEntries: 50,
    8        maxAgeSeconds: 30 * 24 * 60 * 60, // 30天
    9      }),
    10    ],
    11  })
    12);

• 处理跨域资源:

  javascript

  Copy Code

  1// 设置fetch的mode为'cors'，避免不透明响应
  2{
  3  fetchOptions: {
  4    mode: 'cors',
  5    credentials: 'omit',
  6  }
  7}

---

4. 常见问题与解决

• 启发式缓存

  • 问题: 无明确缓存头时，浏览器自动缓存（基于Last-Modified）。
  • 解决: 明确设置Cache-Control: no-cache强制验证。

• 缓存优先级冲突

  • 规则: 最严格策略生效，如no-store覆盖其他缓存指令。

• 版本控制

  • 最佳实践: 文件名哈希（如app.a1b2c3.js），确保更新后URL变化，触发重新获取。

---

5. 缓存决策流程

1. 判断资源类型: 静态资源（JS/CSS/图片）适合强缓存，动态内容（API响应）适合协商缓存。
2. 设置响应头:
   • 强缓存: Cache-Control: public, max-age=31536000（1年）。
   • 协商缓存: Cache-Control: no-cache + ETag/Last-Modified。
3. Service Worker增强: 按需缓存关键资源，支持离线访问。
4. 监控与调试: 使用Chrome DevTools的Network和Application面板验证缓存行为。

---

通过合理配置缓存策略，可显著提升网站性能，减少服务器负载，优化用户体验。