为什么点击地址栏重载按钮后，浏览器会再次请求已缓存的图片？

以下是你遗漏的常见缓存相关配置，按排查优先级排序：

• Youtube源站响应头缺少强缓存配置
  Youtube默认返回的缩略图通常仅带协商缓存标识（Etag/Last-Modified），强缓存max-age配置极短。浏览器点击刷新按钮时，会默认给所有子资源带上Cache-Control: max-age=0请求头发起校验，即使资源未变更也会返回304请求，不会直接复用本地缓存。
  解决方法：在你的服务端加一层缩略图反向代理，给代理返回的响应统一添加头Cache-Control: public, max-age=31536000, immutable，其中immutable属性会明确告知浏览器该资源永久不变，刷新时无需发起校验直接复用缓存。
• 页面主文档的缓存策略强制跳过子资源缓存
  如果你的页面HTML返回头带有Cache-Control: no-store/Pragma: no-cache，浏览器刷新页面时会默认绕过所有子资源的强缓存规则，强制发起网络请求。
  解决方法：将HTML的缓存策略调整为Cache-Control: public, max-age=0, must-revalidate，既保证页面能及时更新，也不会强制子资源跳过缓存。
• 跨域图片属性配置不匹配
  如果你给加载Youtube缩略图的img标签添加了crossorigin="use-credentials"属性，而Youtube缩略图响应头没有返回Access-Control-Allow-Credentials: true，浏览器会将两次加载的资源判定为不同缓存键，无法复用缓存。
  解决方法：加载Youtube缩略图时不需要加crossorigin属性，或明确设置为crossorigin="anonymous"即可。
• 未做主动缓存存储兜底
  浏览器自带的HTTP缓存有容量上限，数百MB的缩略图很容易被浏览器自动清理，仅依赖默认缓存无法实现永久留存。
  解决方法：接入Service Worker的Cache API手动管理这些缩略图的缓存，只要用户不主动清理站点存储，资源可以永久留存，无论刷新还是首次进入都会优先从本地缓存返回，不会发起网络请求。

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