浏览器缓存通过强缓存和协商缓存提升加载速度与系统性能。1. 强缓存由Cache-Control（优先）和Expires控制，命中时直接使用本地资源，不发请求；2. 协商缓存于强缓存失效后触发，依赖Last-Modified/If-Modified-Since和ETag/If-None-Match（优先）向服务器验证资源是否更新，未变则返回304；3. 实际配置建议：静态资源设长max-age并配合哈希版本控制，HTML用no-cache启用协商缓存，API接口用no-store或短缓存以保数据实时性。
浏览器缓存是提升网页加载速度、减少服务器压力的重要机制。合理配置缓存策略，能显著优化用户体验和系统性能。浏览器缓存主要分为强缓存和协商缓存两种类型，它们在请求过程中按顺序生效。
强缓存：跳过请求直接使用本地资源
强缓存通过 HTTP 响应头中的 Expires 和 Cache-Control 字段控制。当命中强缓存时，浏览器不会向服务器发送请求，直接从本地缓存读取资源。
• Expires：指定一个绝对时间（如Expires: Wed, 21 Oct 2025 07:28:00 GMT），在此时间前使用缓存。缺点是依赖客户端时间，若用户设备时间不准会出问题。• Cache-Control：更推荐使用的现代方案，支持相对时间。常见取值包括：
-
max-age=3600：资源在3
600秒内有效-
no-cache：不使用强缓存，但可参与协商缓存-
no-store：禁止任何缓存，每次都要重新请求-
public：响应可被中间代理缓存-
private：仅客户端可缓存，中间代理不可存注意：Cache-Control 优先级高于 Expires，两者同时存在时以前者为准。
协商缓存：与服务器确认资源是否更新
当强缓存失效后，浏览器会发起请求，进入协商缓存阶段。服务器根据请求头判断资源是否有变化，决定返回 304 Not Modified 还是 200 OK 并返回新内容。
- 服务器首次响应时设置
Last-Modified，表示资源最后修改时间- 浏览器再次请求时带上
If-Modified-Since，值为上次的 Last-Modified- 服务器比对时间，未修改则返回 304，否则返回新资源
局限性：文件修改时间可能变化频繁但内容不变，导致误判。
• ETag / If-None-Match
- ETag 是资源的唯一标识（如哈希值），比 Last-Modified 更精确
- 服务器返回 ETag: "abc123"
- 下次请求带 If-None-Match: "abc123"
- 服务器比对 ETag，一致则返回 304
ETag 优先级高于 Last-Modified，两者共存时优先使用 ETag。
实际配置建议
在 Nginx 或 CDN 中合理设置缓存头，可以大幅提升性能。
• 静态资源（JS/CSS/图片）设置较长的 max-age，如
max-age=31536000，并配合文件名哈希实现版本控制• HTML 文件
建议设置
Cache-Control: no-cache，启用协商缓存，确保内容及时更新• API 接口
通常设置
Cache-Control: no-store 或短时效缓存，避免数据滞后基本上就这些。掌握强缓存与协商缓存的原理和配置方式，能让你更精准地控制资源加载行为，兼顾性能与实时性。
