浏览器缓存机制详解_强缓存与协商缓存的配置-js教程-PHP中文网

浏览器缓存机制详解_强缓存与协商缓存的配置

夜晨

发布： 2025-12-02 20:13:22

原创

716人浏览过

浏览器缓存通过强缓存和协商缓存提升加载速度与系统性能。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，否则返回新资源

局限性：文件修改时间可能变化频繁但内容不变，导致误判。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

153

查看详情

• 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 或短时效缓存，避免数据滞后

基本上就这些。掌握强缓存与协商缓存的原理和配置方式，能让你更精准地控制资源加载行为，兼顾性能与实时性。

以上就是浏览器缓存机制详解_强缓存与协商缓存的配置的详细内容，更多请关注php中文网其它相关文章！