前端缓存基础：强缓存、协商缓存和资源更新到底该怎么理解

做前端开发时，缓存是一个绕不开的话题。

页面访问快不快、资源更新生不生效、用户是不是还在看旧代码，这些问题很多都和缓存有关。

但缓存相关概念第一次接触时经常会有点绕，尤其是强缓存和协商缓存，很容易记混。

为什么浏览器要缓存资源

原因很直接：

• 减少重复请求
• 加快页面加载
• 降低服务器压力

像 JS、CSS、图片这类静态资源，如果每次访问都重新下载，成本会很高。浏览器缓存就是为了避免这种重复消耗。

什么是强缓存

强缓存的意思是：浏览器认为本地资源还有效，所以直接使用，不再向服务器发请求。

常见相关字段有：

• Cache-Control
• Expires

只要资源还在有效期内，浏览器就会直接从本地取。

这也是为什么有时你明明改了线上文件，但用户访问页面却看不到最新效果，因为浏览器根本没再请求服务器。

什么是协商缓存

协商缓存的意思是：浏览器会先去问服务器，这个资源有没有变。

如果服务器确认没变，就返回一个轻量响应，告诉浏览器继续用本地版本。

常见相关字段有：

• Last-Modified / If-Modified-Since
• ETag / If-None-Match

它和强缓存的区别在于，协商缓存会发请求，但不一定重新下载资源内容。

两者关系怎么理解

可以简单理解成：

• 强缓存优先
• 强缓存失效后，再走协商缓存

也就是说，一个资源如果还在强缓存有效期内，浏览器通常不会走协商缓存。

为什么前端项目常用带 hash 的文件名

因为静态资源更新时，最大的难题之一就是“如何让浏览器知道这个资源变了”。

如果文件名不变，浏览器可能继续用旧缓存。

所以构建工具通常会产出像下面这样的文件名：

• app.a1b2c3.js
• main.9f8e7d.css

当内容变化时，hash 也会变化，浏览器会把它当成一个新资源重新请求。

这就是为什么现代前端项目常常会把“长缓存 + 文件名 hash”组合在一起使用。

更新不生效的常见原因

1. 文件名没变

资源内容更新了，但 URL 没变，浏览器可能继续命中缓存。

2. HTML 本身缓存策略不合理

很多项目对静态资源做了 hash，却忘了入口 HTML 也需要合理控制缓存。

如果 HTML 还是旧的，那它引用的资源地址也可能还是旧的。

3. 本地调试和生产环境策略混淆

开发环境通常更强调实时更新，生产环境更强调缓存效率。两边策略如果不区分，问题就会变多。

缓存不是越久越好

缓存确实能提升性能，但并不是缓存时间越长越好。

如果更新策略没有设计好，过长缓存会直接变成发布风险。

所以前端缓存真正需要平衡的是：

• 性能
• 可更新性

写在最后

理解浏览器缓存的关键，不是死记字段，而是搞清楚浏览器什么时候直接用本地、什么时候去问服务器、什么时候必须重新下载。

只要把强缓存、协商缓存和文件 hash 之间的关系理顺，前端资源更新问题就会清晰很多。缓存不是玄学，它说到底是资源管理策略的一部分。