浏览器缓存机制与缓存策略详解

浏览器缓存是前端性能优化的重要环节，它能减少网络请求，提升页面加载速度。本文将系统讲解浏览器缓存的分类、工作原理及常见策略。

一、缓存的作用与分类

1. 作用

   • 减少带宽消耗
   • 降低服务器压力
   • 加快页面加载速度

2. 分类

   • 强缓存：直接使用本地缓存，不向服务器发送请求。
   • 协商缓存：向服务器发送请求验证资源是否过期，若未过期则返回304状态码，使用本地缓存。

二、强缓存机制

强缓存通过以下两种HTTP头部实现：

1. Expires（HTTP/1.0）

• 值为绝对时间（如 Expires: Wed, 21 Oct 2025 07:28:00 GMT）。
• 缺点：依赖客户端时间，若时间不准确会导致缓存失效。

2. Cache-Control（HTTP/1.1，优先级高于Expires）

• 常用指令：
  • max-age=3600：资源缓存1小时（相对时间，解决Expires问题）。
  • no-cache：禁用强缓存，进入协商缓存。
  • no-store：完全禁止缓存（用于敏感数据）。
  • public：允许代理服务器缓存资源。
  • private：仅允许浏览器缓存（默认值）。

示例流程：

浏览器请求资源 → 检查Cache-Control的max-age  
    ↓  
若未过期 → 直接使用缓存（状态码200 from cache）  
    ↓  
若过期 → 进入协商缓存流程  

三、协商缓存机制

当强缓存失效时，浏览器携带缓存标识向服务器验证资源是否更新。

1. Last-Modified 与 If-Modified-Since

• 服务器返回资源时添加 Last-Modified（最后修改时间）。
• 浏览器再次请求时携带 If-Modified-Since，服务器对比时间：
  • 时间一致 → 返回304（Not Modified）
  • 时间不一致 → 返回200和新资源

2. ETag 与 If-None-Match（优先级高于Last-Modified）

• 服务器为资源生成唯一标识（如哈希值），通过 ETag 返回。
• 浏览器再次请求时携带 If-None-Match，服务器对比ETag：
  • 一致 → 返回304
  • 不一致 → 返回200和新资源

为什么需要ETag？

• 解决Last-Modified的局限性：
  • 文件内容未变但修改时间变化（如重复保存）。
  • 秒级以下修改无法检测。

四、缓存策略实践

1. 静态资源（如JS、CSS、图片）

• 设置 Cache-Control: max-age=31536000（一年）强缓存。
• 通过文件名哈希实现资源更新（如 app.a3b4c5.js），确保内容变化后URL改变，触发重新获取。

2. HTML文件

• 设置 Cache-Control: no-cache，避免页面结构被长期缓存。

3. 动态接口

• 对数据一致性要求高的接口使用 Cache-Control: no-store。

五、用户行为对缓存的影响

1. 正常刷新 → 触发协商缓存（可能跳过强缓存）。
2. 强制刷新（Ctrl+F5） → 忽略所有缓存，直接向服务器请求。
3. 地址栏回车 → 优先使用强缓存。

六、总结

• 强缓存通过 Cache-Control 和 Expires 控制，优先级前者更高。
• 协商缓存通过 Last-Modified/If-Modified-Since 或 ETag/If-None-Match 实现。
• 实际项目中需根据资源类型设计缓存策略，结合文件名哈希解决缓存更新问题。