React应用中Chrome为何重复请求已缓存图片？缓存未命中排查

为什么同URL图片会触发两次请求 #

浏览器不会自动复用所有同URL的请求结果，出现重复请求基本是以下几个原因：

• 预拉取方式错误：如果用fetch/axios等XHR类方法预拉取图片二进制，这类请求的响应默认不会进入浏览器的图片资源缓存池，和<img>标签的资源加载通道是隔离的，浏览器会把后续img标签触发的同URL请求当成全新请求处理。
• 资源响应头配置错误：如果服务端返回的图片响应没有带正确的缓存标识，比如Cache-Control设置为no-cache/no-store，或者没有设置max-age，浏览器不会信任本地已下载的资源，会重新发起请求校验或拉取。另外如果预拉取和实际渲染时的URL存在细微差异（比如多余的查询参数、斜杠、协议差异），也会被识别为不同资源。
• 预拉取未完成就触发组件渲染：如果组件挂载触发img加载时，预拉取的请求还处于pending状态，浏览器不会等待预拉取完成复用结果，会直接发起第二个并行请求。

可落地的修复方案 #

• 替换预拉取实现方式：不要用XHR/fetch做图片预加载，直接用原生Image对象触发加载，资源会直接进入浏览器图片缓存池，后续同src的img标签会直接复用缓存，示例代码：

// 预加载工具方法
const preloadImageList = (imageUrls) => {
  return Promise.all(imageUrls.map(url => {
    return new Promise((resolve, reject) => {
      const img = new Image()
      img.onload = resolve
      img.onerror = reject
      img.src = url
    })
  }))
}

• 配置正确的静态资源缓存头：给图片类静态资源设置响应头Cache-Control: public, max-age=31536000, immutable，告知浏览器该资源1年内不会变动，直接读取本地缓存即可，无需发起网络请求。
• 增加预加载完成状态判断：等preloadImageList方法所有图片加载完成的Promise resolve之后，再渲染挂载用到对应图片的业务组件，从流程上避免提前触发请求。

检查资源是否已在缓存中的方法 #

• 开发者工具可视化检查：打开Chrome DevTools切换到Network面板，刷新页面后找到对应图片请求，如果Size列显示(memory cache)或(disk cache)，就代表该资源是从缓存读取，没有发起真实网络请求。
• 代码层面判断：通过浏览器Performance API查询已加载资源的记录，transferSize为0即代表资源从缓存读取：

const checkImageCached = (targetUrl) => {
  const loadedResources = performance.getEntriesByType('resource')
  return loadedResources.some(res => res.name === targetUrl && res.transferSize === 0)
}

注意该方法只能查询已经触发过加载流程的资源状态，无法检测未发起过请求的资源。

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