浏览器缓存通过强缓存和协商缓存提升加载速度与系统性能。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：资源在3600秒内有效
- no-cache：不使用强缓存，但可参与协商缓存
- no-store：禁止任何缓存，每次都要重新请求
- public：响应可被中间代理缓存
- private：仅客户端可缓存，中间代理不可存
注意：Cache-Control 优先级高于 Expires，两者同时存在时以前者为准。
协商缓存：与服务器确认资源是否更新
当强缓存失效后，浏览器会发起请求，进入协商缓存阶段。服务器根据请求头判断资源是否有变化，决定返回 304 Not Modified 还是 200 OK 并返回新内容。
• Last-Modified / If-Modified-Since
- 服务器首次响应时设置 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 或短时效缓存，避免数据滞后
基本上就这些。掌握强缓存与协商缓存的原理和配置方式，能让你更精准地控制资源加载行为，兼顾性能与实时性。
以上就是浏览器缓存机制详解_强缓存与协商缓存的配置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540112.html
微信扫一扫 
支付宝扫一扫 
