一、这个技术是什么？
网页中的 JavaScript、CSS、图片和字体经常被重复请求。如果每次都从服务器重新下载，页面会变慢，也会浪费带宽。
HTTP 缓存让浏览器在资源没有变化时直接复用本地副本，或者先询问服务器“本地版本还能不能用”。
二、没有它之前发生了什么？
每次打开页面都重新下载资源
↓
重复传输造成慢和浪费
↓
服务器返回资源版本信息
↓
浏览器根据新鲜度或验证结果复用缓存
缓存的目标不是“永远不请求服务器”，而是在正确性和速度之间取得平衡。
三、核心概念
1. Cache-Control
Cache-Control 描述资源可以缓存多久、谁可以缓存，以及是否需要重新验证。
2. Freshness
资源在有效时间内可以直接使用，不需要再次询问服务器。
3. ETag
ETag 是资源版本的标识。浏览器可以通过 If-None-Match 询问服务器资源是否变化。
4. Last-Modified
服务器可以使用最后修改时间作为版本依据，浏览器通过 If-Modified-Since 发起验证。
5. 304 Not Modified
如果资源没有变化，服务器可以返回 304，让浏览器继续使用本地副本，而不是重新传输完整内容。
四、运行流程
五、面试复习
一句话回答
HTTP 缓存通过保存资源副本和版本信息，减少重复下载；资源过期时可以使用 ETag 或 Last-Modified 与服务器验证。
高频追问
- 304 是否包含完整响应体？
- ETag 和 Last-Modified 有什么区别？
- 为什么静态资源文件名经常带 hash？
- 缓存太久会带来什么问题？
容易答错
不要把缓存命中说成服务器没有参与。强缓存可能不请求服务器，协商缓存仍然需要服务器判断版本。
六、项目展示
在 Next.js 项目中，可以对带 hash 的构建资源设置较长缓存时间，对 HTML 设置较短缓存时间或重新验证，从而兼顾发布速度和内容正确性。