除了强缓存、协商缓存,你还知道启发式缓存吗?

除了强缓存、协商缓存,你还知道启发式缓存吗?

大家多多少少对浏览器的强缓存协商缓存 都有一定的了解。但是不知道大家有没有遇到过这种情况,就是服务器的响应头里没有配置 Expires 和 cache-control。而是配置了 Last-Modified 和 ETag。理论上这种情况下浏览器应该要走协商缓存,但是结果却返回的 200(from memory cache),直接走的强缓存。为什么会出现这种情况呢?

那是因为还有一种被称为启发式缓存的机制,它在某些情况下会自动生效。首先简单过一遍强缓存和协商缓存的概念。

强缓存

强缓存是指浏览器在请求资源时,直接从本地缓存中获取资源,而不需要向服务器发送请求。强缓存的有效性由响应头中的 Cache-ControlExpires 字段控制。

  • Cache-Control: 该字段用于指定资源的缓存策略。常见的值如下表所示:

    描述 示例
    max-age=<seconds> 指定资源的最大缓存时间,单位为秒 Cache-Control: max-age=3600 表示资源可以在客户端缓存 1 小时
    no-cache 强制客户端在使用缓存前,先向服务器验证资源是否有效 Cache-Control: no-cache 表示每次请求都必须向服务器验证资源是否有效
    no-store 禁止缓存资源,每次请求都必须从服务器获取最新资源 Cache-Control: no-store 表示资源不能被缓存
    public 表示资源可以被任何缓存(如代理服务器)缓存 Cache-Control: public, max-age=3600 表示资源可以被任何缓存缓存 1 小时
    private 表示资源只能被客户端缓存,代理服务器不能缓存 Cache-Control: private, max-age=3600 表示资源只能被客户端缓存 1 小时
  • Expires : 该字段指定资源的过期时间,是一个绝对时间点。如果当前时间早于 Expires 指定的时间,则浏览器会使用缓存中的资源。例如,Expires: Thu, 20 Mar 2025 11:18:00 GMT 表示资源在 2025 年 3 月 20 日 11:18:00 GMT 之前有效。

如果 Cache-ControlExpires 同时存在,Cache-Control 的优先级更高

协商缓存

强缓存失效时 ,浏览器会向服务器发送请求,服务器会根据请求头中的 If-Modified-SinceIf-None-Match 字段判断资源是否发生了变化。如果资源没有变化,服务器会返回 304 Not Modified 状态码,浏览器会继续使用缓存中的资源;如果资源发生了变化,服务器会返回新的资源。

  • Last-Modified / If-Modified-Since : Last-Modified 是服务器返回的响应头,表示资源的最后修改时间 。当浏览器再次请求该资源时,会在请求头中带上 If-Modified-Since 字段,值为上一次请求时服务器返回的 Last-Modified 值。服务器通过比较资源的最后修改时间和 If-Modified-Since 的值来判断资源是否发生了变化。例如,服务器返回 Last-Modified: Thu, 20 Mar 2025 11:18:00 GMT,浏览器再次请求时会在请求头中带上 If-Modified-Since: Thu, 20 Mar 2025 11:18:00 GMT

  • ETag / If-None-Match : ETag 是服务器返回的响应头,表示资源的唯一标识符 。当浏览器再次请求该资源时,会在请求头中带上 If-None-Match 字段,值为上一次请求时服务器返回的 ETag 值。服务器通过比较资源的 ETagIf-None-Match 的值来判断资源是否发生了变化。例如,服务器返回 ETag: "5sd564sd5s665hg587s1a32wer5",浏览器再次请求时会在请求头中带上 If-None-Match: "5sd564sd5s665hg587s1a32wer5"

如果 Last-ModifiedETag 同时存在,ETag 的优先级更高

启发式缓存

启发式缓存是浏览器在没有明确的缓存指令 (如 Cache-ControlExpires)时,根据资源的 Last-Modified 时间自动推断出的缓存策略 。浏览器会根据资源的 Last-Modified 时间和Date的差值,推断出一个合理的缓存时间。

以上图为例,资源的 Last-Modified 时间是 Wed, 19 Mar 2025 06:20:20 GMT,当前时间 Date是 Thu, 20 Mar 2025 02:14:54 GMT。客户端存储此响应(尽管缺少 max-age)并重用它一段时间。复用多长时间取决于实现,但规范建议存储后大约 10% 的时间,本例中就是 2 小时。

但如果客户端的 Date 头比资源 Last-Modified 头早时:浏览器会认为资源已经过期,并重新请求资源。这种情况可能就是服务器时钟滞后或者人为错误修改了响应头。

  • 不会触发启发式缓存计算
  • 下次请求时直接发送完整请求(不带If-Modified-Since
  • 开发者工具Console会显示时间异常警告

小结

从缓存优先级上来看,显示强缓存 > 启发式缓存(未配置强缓存,本质上属于强缓存的一种特殊形态) > 协商缓存。

也就是说启发式缓存的存在是一种兜底策略,是为了在服务器没有明确指定缓存策略时,仍然能够在一定程度上利用缓存提升性能。然而,由于启发式缓存是基于时间推断的,它可能会导致缓存资源过早失效或过晚更新,因此在实际应用中应谨慎使用。

欢迎大家关注我的个人博客:https://puppy.xin

相关推荐
hpoenixf2 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特2 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷3 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian3 小时前
前端node常用配置
前端
华洛4 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq4 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A5 小时前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常5 小时前
被EdgeToEdge适配折磨疯了,谁懂!
前端
小码哥_常5 小时前
从Groovy到KTS:Android Gradle脚本的华丽转身
前端
灵感__idea5 小时前
Hello 算法:复杂问题的应对策略
前端·javascript·算法