当用户访问网站时，浏览器会向网页服务器请求所需文件，这些文件会在用户屏幕上显示。为了避免反复请求相同的资源并加快加载过程，浏览器缓存将这些文件的副本存储在本地。当用户再次访问该网站或在同一网站内导航到不同页面时，浏览器可以快速加载缓存资源，从而减少从服务器获取的数据量。
本文将系统介绍浏览器缓存的工作机制、可用类型、相关HTTP头，以及为什么每个开发者都需要真正理解它。
一次页面请求的完整过程
在讨论浏览器缓存之前，先梳理一下用户首次访问网站时发生的基本过程：
请求：浏览器向服务器发送HTTP请求，获取页面所需的HTML文件、图片、CSS样式表和JavaScript文件。
响应：服务器处理请求，将所有资源返回给浏览器。
渲染：浏览器下载资源并将页面呈现给用户。
一个普通的网页，光是静态资源（Logo、字体、样式文件、脚本）就可能涉及几十甚至上百次网络往返。每一次都意味着等待、带宽消耗和服务器延迟。
什么是浏览器缓存
浏览器缓存，也称为网页缓存或缓存引擎，是网页浏览器用来保存和管理本地网页资源副本（如 HTML 页面、图片、样式表和 JavaScript 文件）的临时存储区域。浏览器缓存的主要目的是通过加速网页加载速度、减少网络流量、延迟和带宽消耗来提升用户体验。
当用户再次访问同一站点，或者访问该站点的其他页面时，如果引用了相同的资源，浏览器会优先查找本地缓存。若文件存在且未过期，浏览器直接从本地磁盘加载，不再向服务器发起请求。
这比从远程服务器重新获取资源快了不止一个数量级。
缓存的两种状态：有效与过期
缓存资源不会永久有效，其生命周期由服务器在HTTP响应头中定义。
强缓存（过期模型）
这是最激进也是最快速的缓存方式。服务器告诉浏览器某个文件可以保存多长时间，在此期间浏览器可以直接使用本地副本，无需向服务器确认。
机制：浏览器收到资源后，根据max-age的值开始计时。在有效期内，后续每次访问都直接命中本地缓存，不产生任何服务器通信，这称为”缓存命中”。
关键响应头：Cache-Control: max-age=<秒数>（以及已逐渐废弃的Expires）。
协商缓存（重验证模型）
当强缓存到期后，浏览器不能直接使用旧的缓存副本，需要先向服务器询问文件是否发生了变化。
关键响应头：Last-Modified 和 ETag（实体标签）。
机制：浏览器发送带有条件的请求，附上If-Modified-Since（基于存储的Last-Modified时间）或If-None-Match（基于存储的ETag值）头。服务器检查资源版本后做出判断：
- 文件未变化：服务器返回HTTP 304 Not Modified，只有响应头，没有响应体，告诉浏览器”你的缓存仍然有效，直接用吧”。浏览器继续使用本地副本。
- 文件已更新：服务器返回HTTP 200 OK，并将新版本的文件连同新的缓存头一起发送。浏览器替换旧副本，重新开始计时。
重验证虽然比直接命中缓存慢一些，但比完整重新下载文件要快得多，消耗的带宽也少得多。
HTTP缓存相关响应头
| 响应头 | 用途 | 缓存类型 | 建议场景 |
|---|---|---|---|
| Cache-Control | 定义缓存策略的核心头，指定资源是否公开/私有、有效时长及重验证规则 | 强缓存与协商缓存 | 所有静态资源必配，如public, max-age=31536000 |
| Expires | 指定资源过期的具体时间点，已基本被Cache-Control: max-age取代 | 强缓存 | 仅作兼容性保留，建议改用Cache-Control |
| ETag | 资源特定版本的唯一标识符（通常为哈希值），用于高效重验证 | 协商缓存 | 适合频繁更新或动态内容，Last-Modified精度不足时使用 |
| Last-Modified | 服务器上资源的最后修改时间戳，配合If-Modified-Since进行重验证 | 协商缓存 | 大多数静态资源的标准配置 |
| Pragma | HTTP/1.0遗留头，仅用于向后兼容 | 无 | 现代配置中避免使用 |
Cache-Control 常用指令说明：
- public：响应可被CDN和客户端浏览器共同缓存。
- private：响应仅针对单个用户，只能由客户端浏览器缓存，不可由CDN缓存。
- no-cache：名字容易误导人——它并非禁止缓存，而是要求每次使用前必须先向源服务器做一次304重验证。
- no-store：浏览器和CDN均不得存储响应的任何内容，用于高度敏感的数据。
- max-age=<秒数>：定义强缓存的有效时长。
浏览器缓存的实际价值
对页面速度的影响
百度等搜索引擎早已将网页打开速度纳入排名算法，页面加载体验直接影响搜索排名。合理配置缓存可以改善以下指标：
LCP（最大内容绘制）：衡量加载性能。对大型背景图、字体等静态资源做好缓存，可以实现近乎即时的加载，显著降低LCP值。
FID（首次输入延迟）：衡量交互响应。缓存对FID没有直接影响，但更快的首字节时间意味着主线程压力更小，有更多资源响应用户操作。
整体页面速度：搜索引擎对快速网站更为青睐。缓存是降低页面加载时间相关性最高的单一因素，也有助于提升爬虫抓取效率和搜索排名。
对用户体验的影响
网站加载速度快，本身就是一种可访问性。对以下用户群体尤为重要：
- 网络条件较差的用户：使用3G网络或网络基础设施薄弱地区的用户，每一次不必要的资源重新下载都是负担。
- 有流量限制的用户：移动设备或按流量计费套餐的用户，更不应该为没有变化的内容反复消耗流量。
- 所有用户：页面加载越快，使用体验越顺畅，认知负担也越低。
对服务器负载和运营成本的影响
当用户从本地缓存获取文件时，服务器无需消耗任何CPU、内存或带宽来处理这次请求。
提升服务器处理能力：将静态资源的分发交给客户端本地处理，服务器可以将资源集中用于动态请求，如数据库查询、用户认证、订单处理等，整体承载能力随之提升。
降低带宽成本：对于访问量大的站点，每一个被缓存命中的资源都省下了一次数据传输。长期累积下来，这对托管和CDN的带宽费用影响相当可观。
网页缓存配置建议
为静态资源设置较长的过期时间
对于不经常变动的资源（图片、编译后的CSS、JavaScript库、字体），设置较长的max-age值，如6个月或1年。
示例：Cache-Control: public, max-age=31536000
通过文件指纹解决缓存更新问题
长过期时间带来一个问题：文件更新后，用户可能在缓存到期之前都无法看到新版本。
解决方案是缓存破坏（Cache Busting），也称为资源文件指纹：
将文件名从style.css改为style.f9gh5j.css或style.css?v=20260225。每次文件内容发生变化，哈希值或版本号随之更新，形成新的URL。浏览器从未见过这个URL，会将其视为全新资源直接下载，完全绕过旧缓存。
这样既保留了长缓存的性能优势，又确保了内容更新能够即时生效。
对动态内容使用协商缓存
对于频繁更新但不一定每次都变化的内容（如新闻列表、实时数据），配合使用ETag、Last-Modified和Cache-Control: no-cache。
no-cache强制浏览器在每次请求前进行304重验证，确保用户始终获取最新内容，同时在内容未变化时避免完整下载。
在服务器层面统一配置缓存规则
缓存响应头需要在Web服务器软件中正确配置，例如通过Apache的.htaccess文件或Nginx的配置文件进行设置。大多数托管平台也提供了可视化界面来管理这些规则。
常见问题
什么是浏览器缓存？
浏览器缓存将网站文件（如图片、CSS 和 JavaScript）存储在用户设备上，这样每次访问网站时就无需重新下载。
为什么浏览器缓存对网站速度很重要？
通过本地加载存储文件而非重复请求，缓存可以减少页面加载时间并提升整体性能。
浏览器缓存会影响 SEO？
是的，更快的网站加载能提升用户体验，并能积极影响百度、谷歌等平台上的搜索排名。
浏览器缓存会带来问题吗？
如果配置不当，用户可能会看到过时内容，这也是开发者采用版本控制和缓存失效策略的原因。
原创文章，作者：余初云，如若转载，请注明出处：https://blog.jidcy.com/jsjc/2366.html