JavaScript中能否依赖fetch缓存资源？link标签能否复用缓存？

核心结论 #

• 多数情况下会从缓存读取，但绝对不能依赖这个行为。

具体分析 #

1. 缓存命中的可能性 #

当你用fetch('/mystyle.css')请求资源时，浏览器会严格遵循HTTP缓存规则（比如响应头里的Cache-Control、Expires、ETag等）决定是否缓存文件。如果服务器返回的响应允许缓存，这个CSS文件就会被存入浏览器的HTTP缓存池。

后续页面2里的<link rel="stylesheet" href="mystyle.css">发起请求时，浏览器会先检查缓存：只要缓存的资源没过期、校验信息（比如ETag）匹配，就会直接复用缓存，不会重新向服务器发起请求。

2. 不能依赖该行为的关键原因 #

• 缓存规则不受前端控制：服务器的缓存配置随时可能变化，比如哪天把Cache-Control改成no-store，那fetch获取的资源根本不会被缓存。
• 浏览器行为存在差异：不同浏览器（甚至同一浏览器的不同版本）对fetch和<link>请求的缓存处理可能有细微差别，极端场景下两者的缓存标识可能不匹配。
• 缓存失效场景不可控：用户手动清空缓存、浏览器因空间不足自动清理缓存、资源的ETag/Last-Modified值更新，都会导致缓存失效。
• fetch的配置可能破坏缓存：如果fetch请求时加了cache: 'no-store'或cache: 'reload'这类选项，请求的资源不会写入缓存，后续<link>标签自然用不了缓存。

更可靠的替代方案 #

如果想确保后续页面能复用资源，推荐用更明确的方式：

• 直接在页面1用预加载标签获取CSS：

  <link rel="preload" href="/mystyle.css" as="style">
  

• 或者确保fetch请求遵循缓存规则的同时，和后端确认稳定的缓存响应头配置。

内容的提问来源于stack exchange，提问作者Hammerhead