window.fetch未复用浏览器已缓存图片问题及优化咨询

1. 这种行为是设计如此吗？ #

这得从两个关键点来看：

• URL的缓存逻辑：浏览器缓存是绑定完整URL的，包括后面的查询参数。如果两次请求用的是同一个带?3的URL，但没复用缓存，大概率是服务器返回的缓存响应头在限制缓存，不是查询参数的锅。比如响应头带了Cache-Control: no-cache（每次都要验证资源）、Cache-Control: no-store（完全不存缓存），或者Expires设成了过去的时间，这些都会让浏览器不敢直接用缓存。
• fetch的默认规则：fetch默认的缓存模式是default，意思是缓存有效就直接用，无效才发请求。但如果服务器不让缓存，哪怕URL一样，浏览器也不会复用。

要是你第二次请求换了URL（比如改了查询参数），那浏览器肯定当新资源处理，不会用之前的缓存，这属于正常逻辑。

2. 怎么让浏览器优先用缓存？ #

可以从这几个方向调整：

• 固定请求URL：两次请求必须用完全一样的URL，包括查询参数，比如都用xxx.jpg?3，别随便改后面的参数。
• 指定fetch的缓存模式：显式把cache选项设为force-cache，强制浏览器先找缓存，只有缓存不存在的时候才发请求：

  fetch('xxx.jpg?3', { cache: 'force-cache' })
  

  还有个only-if-cached模式，但它只能用于同源请求，而且没缓存的话直接报错，一般用得少。
• 调整服务器响应头：让服务器返回允许缓存的响应头，比如设置合适的Cache-Control：
  • Cache-Control: public, max-age=3600：允许公共缓存，1小时内直接用缓存
  • Cache-Control: private, max-age=86400：只让浏览器自己存缓存，有效期一天
    还可以配合ETag或Last-Modified头，缓存过期后浏览器可以只验证资源有没有更新，不用重新下载整个文件。
• 适配GM.xmlhttpRequest：如果用油猴的这个方法，可以在请求头里加缓存相关设置，或者部分版本支持直接设cache参数：

  GM.xmlhttpRequest({
    method: 'GET',
    url: 'xxx.jpg?3',
    headers: {
      'Cache-Control': 'force-cache'
    },
    onload: function(res) {
      // 处理返回内容
    }
  });
  

要注意，如果服务器明确设置了no-store这种完全禁止缓存的头，那就算你设了force-cache也没用，这时候得找服务器那边调整缓存策略。

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