Github Pages静态资源缓存问题：图片反复请求未缓存求助

1. 优先检查AWS S3的缓存配置 #

• 查看S3对象元数据：进入S3控制台找到对应图片，检查元数据里的Cache-Control字段，确认是否设置了预期值（比如max-age=31536000, public）。批量上传的话，要确认上传脚本/工具是否带了--cache-control参数（CLI示例：aws s3 cp image.jpg s3://your-bucket/ --cache-control "max-age=31536000, public"）。
• 检查Bucket级缓存规则：如果设置了Bucket生命周期规则或默认缓存策略，确认没有覆盖对象级的Cache-Control设置。
• 若用CloudFront分发S3资源：检查CloudFront行为的缓存策略，CloudFront的设置优先级高于S3对象元数据，要确保没有强制设为no-cache或覆盖max-age值。

2. 验证请求本身的问题 #

• 检查图片URL一致性：确认页面里的S3图片URL没有动态参数（比如?t=随机数），浏览器会把带不同参数的URL当成不同资源，不会复用缓存。
• 查看浏览器请求头：打开开发者工具→Network面板，筛选图片请求，查看：
  • Response Headers里的Cache-Control是否为预期值；
  • Request Headers中是否存在Cache-Control: no-cache或Pragma: no-cache，这类头会强制浏览器绕过缓存重新请求。

3. 排查页面及JS的缓存干扰 #

• 检查页面meta标签：确认HTML里没有全局禁用缓存的meta标签，比如：

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  

  这类标签会影响所有页面资源的缓存策略，包括外部S3图片。
• 修正JS预加载代码：预加载无效大多是逻辑问题，确保只执行一次预加载，且URL和页面实际使用的完全一致：

  // 正确的预加载逻辑（只需执行一次）
  const preloadedImages = new Set();
  function preloadImage(url) {
    if (preloadedImages.has(url)) return;
    const img = new Image();
    img.src = url;
    preloadedImages.add(url);
  }
  // 页面初始化时调用
  preloadImage('https://your-s3-bucket/path/to/image.jpg');
  

  别每次页面渲染都重复调用预加载，也不要在请求时设置cache: 'no-store'这类禁用缓存的选项。

4. 排除Github Pages的影响 #

你已经改用S3直接链接，Github Pages不会直接干预S3资源的缓存行为，无需考虑其默认缓存规则的影响，重点放在上述S3、请求、页面/JS的排查上。

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