什么是 HTTP 缓存？搞懂强缓存、协商缓存、304 与 CDN 协同原理

腾势第九

前言

       不知道你有没有发现一个现象：同一个网页，第一次打开加载很慢，再次访问却几乎秒开，加载速度甚至能相差十倍。造成这个现象的核心原因，就是 HTTP 缓存。
        HTTP 缓存是浏览器、服务器、CDN 之间一套约定好的资源复用规则，用来控制网页图片、JS 脚本、CSS 样式、字体、接口数据，是每次都重新从网络下载，还是直接读取本地保存的副本。用好缓存，能够大幅降低网络带宽消耗、减少请求延迟，显著提升用户访问体验。

网页基础加载流程

在浏览器地址栏输入网址，首先会请求 HTML 主页面。HTML 文档内部又会引用大量外部资源：CSS 样式、JavaScript 脚本、Logo 图片、字体文件、视频封面等等。
一个普通网页往往会触发几十甚至上百个 HTTP 请求。如果每一次访问网站，全部资源都要重新下载，页面加载速度就会完全受制于网络带宽、网络延迟、服务器响应速度，页面打开慢就会成为常态。
但网页中大量静态资源，很长时间都不会发生变化：网站 Logo 可能数月不改，前端框架脚本可能几周更新一次，字体文件甚至几年都不会变动。如果每次访问都重复下载这些不变的文件，就如同每天上班都重新购买一套办公桌椅，会产生极大的资源浪费。HTTP 缓存就是为了解决这种重复请求浪费的问题而生。
HTTP 缓存主要分为两大类：强缓存、协商缓存。
一、强缓存：无需询问服务器，直接读取本地缓存

强缓存的核心逻辑：浏览器本地自行判断资源是否还在有效期，不需要向服务器发送网络请求，直接读取本地缓存资源，因此速度极快。
在浏览器开发者工具 Network 面板中看到 from memory cache、from disk cache，就代表命中了强缓存：

• from memory cache：内存缓存，读取速度最快；数据保存在浏览器内存，关闭标签页之后缓存就会被释放。
• from disk cache：磁盘缓存，读取速度略低于内存；持久保存在硬盘，关闭浏览器之后依然可以保留缓存。
  

控制强缓存主要依靠两个 HTTP 响应头：

• ExpiresHTTP/1.0 时代的方案，设置一个 GMT 格式的绝对过期时间。缺点是完全依赖客户端本地系统时间，如果用户电脑时间错乱，缓存判断就会出错，现在已经很少使用。
• Cache‑Control（HTTP/1.1，现代主流）max‑age=3600 代表资源有效期为 3600 秒（1 小时）。在有效期之内，浏览器再次请求该资源，直接读取本地缓存，不会发起网络请求。
  

当Expires与Cache‑Control同时存在时，Cache‑Control优先级更高。

注意：强缓存过期≠必须重新下载资源。缓存到期之后，就进入协商缓存流程。

二、协商缓存：过期之后，找服务器校验资源是否更新

当强缓存有效期结束，浏览器不能直接复用本地缓存，就会携带资源的标识信息去询问服务器：“我本地有一份旧资源，请问还可以继续使用吗？”，这就是协商缓存。

• 如果服务器判断资源内容没有发生修改：返回 304 Not Modified，这个响应只返回 HTTP 头部，不会返回完整资源内容，浏览器继续使用本地缓存副本，节省大量带宽。
• 如果服务器判定资源已经更新：返回 200 OK，同时下发全新的资源文件，浏览器下载新资源并更新本地缓存。
  

协商缓存有两套配套的请求头、响应头机制：
1. Last‑Modified / If‑Modified‑Since

• 服务器响应头：Last‑Modified，记录资源文件最后修改时间。
• 浏览器再次请求时带上请求头：If‑Modified‑Since，把上次拿到的修改时间传给服务器。
• 服务器对比时间，判断文件是否改动。
  

缺点：精度只有秒级。1 秒内多次修改文件，无法识别；文件时间戳改动、内容不变，也会误判为更新。
2. ETag / If‑None‑Match（更推荐）

ETag 相当于资源的 “数字指纹”，一般由文件内容哈希生成，只要文件内容发生变化，ETag 就会改变，不受文件修改时间影响。

• 服务器响应头：ETag，资源唯一指纹标识。
• 浏览器再次请求带上请求头：If‑None‑Match，回传旧的 ETag。
• 服务器比对 ETag，相同返回 304，不同返回 200 与新资源。
  

HTTP 规范中，如果同时配置两套机制，ETag 优先级高于 Last‑Modified稀土掘金。

为什么第二次打开网页速度能够快十倍？

• 首次访问：浏览器需要请求 HTML、下载 CSS、JS、图片、字体，建立网络连接，等待服务器响应，大量文件需要网络传输，下载体积大。
• 二次访问：JS、CSS、图片、字体命中强缓存，浏览器直接从内存 / 磁盘读取；仅少量资源走协商缓存校验。几十个网络请求缩减为少数请求，MB 级别的下载量变成 KB 级别的校验报文，页面自然实现秒开。
  

前端工程中的缓存最佳实践

缓存不是设置得越久就越好，不同类型资源要设计差异化策略。

• HTML 入口文件，不适合长时效强缓存HTML 作为页面入口，决定页面引用哪些 JS、CSS 文件。如果 HTML 被长时间强缓存，用户会一直拿到旧页面入口，看不到业务更新。
  

常规方案：HTML 设置 Cache‑Control: no‑cache，每次都走协商缓存，向服务器确认是否更新。

💡误区：no‑cache 不是禁止缓存，而是使用缓存前必须向服务器校验；真正禁止存储缓存是 no‑store稀土掘金。

• JS/CSS/ 图片等静态资源：长缓存 + 文件哈希现代前端构建工具（Vite、Webpack）会给静态资源文件名追加内容哈希，例如 app.abc123.js。配置 Cache‑Control: max‑age=31536000（一年有效期）。
  

• 文件内容不变，哈希文件名不变，浏览器可以无限复用缓存；
• 代码更新，构建工具生成全新哈希文件名，HTML 入口直接引用新文件名，旧缓存文件不会被读取，实现版本平滑更新。
  

核心思路：入口文件短缓存，带哈希的静态资源开启长期强缓存。

• 敏感业务接口的缓存策略登录状态、购物车、用户余额、订单列表这类用户隐私、动态数据，缓存策略需要格外谨慎。
  

• Cache‑Control: no‑store：完全禁止缓存，敏感数据绝不保存到浏览器或者中间代理；
• Cache‑Control: private：仅允许浏览器本地缓存，禁止 CDN、代理服务器缓存，保护用户隐私数据，避免多用户共享代理环境下的数据泄露风险。
  

CDN 缓存：多用户层面的缓存加速

浏览器缓存解决同一个用户重复访问的性能问题；CDN 缓存解决大量不同用户访问同一资源的加速问题。
CDN 由遍布各地的边缘节点服务器组成。假设源站部署在北京，广州用户访问图片资源，CDN 会把静态资源缓存到广州本地边缘节点。后续广州其他用户访问，直接就近从 CDN 节点返回资源，不再回源北京源站，大幅降低跨地域网络延迟。
浏览器缓存 + CDN 缓存两者叠加，网页整体加载性能会得到进一步提升。
如何在浏览器调试观察 HTTP 缓存？

打开浏览器开发者工具，切换到 Network 面板：

• 首次加载页面：资源状态码大多为 200，Size 显示实际文件下载体积。
• 二次刷新页面：
  
  • 显示from memory cache / from disk cache：命中强缓存；
  • 状态码显示304：命中协商缓存。
    
• 勾选Disable cache（禁用缓存），浏览器将完全忽略本地缓存，每次全部重新请求资源，可模拟首次访问场景，用来排查性能、缓存版本异常问题。
  

总结

HTTP 缓存并不是简单把网页保存到本地，而是浏览器、服务器、CDN 多方协同的一套资源复用机制。

• 强缓存：资源未过期，浏览器直接读取本地，不发送网络请求，性能最优；
• 协商缓存：缓存过期后，携带资源标识向服务器校验，未变更返回 304，仅传输少量头部信息；
• 工程实践：HTML 入口用no‑cache协商校验，带哈希后缀的静态资源配置长期强缓存；敏感接口使用no‑store、private保护数据安全；
• CDN 负责边缘节点缓存，解决大量用户跨地域访问的速度问题；浏览器缓存负责本机重复访问优化，两者配合最大化网页性能。
  

合理设计缓存策略，就可以做到既保证用户看到最新业务内容，又实现页面近乎秒开的访问体验。