仅加载缓存中CDN版jQuery，无缓存则回退本地脚本方案问询

这个需求真的很聪明——既想蹭多数用户已有的CDN缓存速度，又不想为没缓存的用户额外发起CDN请求，完美平衡了加载体验和网络请求量！其实有个巧妙的方案能实现，核心思路是先检查浏览器缓存中是否存在目标CDN的jQuery，再动态决定加载源，完全不会触发多余的CDN请求。

核心实现逻辑 #

我们可以利用浏览器的fetch API，通过cache: 'only-if-cached'模式来检查缓存——这个模式下，fetch只会读取本地缓存，绝对不会发起新的网络请求。如果缓存命中，就加载CDN版本；否则直接加载本地版本。

具体代码示例 #

// 检查缓存中是否存在目标CDN资源
async function checkCachedCDNResource(url) {
  try {
    // 跨域CDN需要配合mode: 'no-cors'，否则only-if-cached无法读取跨域缓存
    const request = new Request(url, { 
      cache: 'only-if-cached', 
      mode: 'no-cors' 
    });
    const response = await fetch(request);
    // 只要能获取到缓存资源就算命中
    return response.type !== 'error';
  } catch (err) {
    // 捕获到错误说明缓存中没有该资源
    return false;
  }
}

// 动态加载jQuery
(async function loadjQuery() {
  const cdnJqueryUrl = 'https://thecdn/jquery.min.js';
  const localJqueryUrl = './jquery.min.js';
  const hasCachedCDN = await checkCachedCDNResource(cdnJqueryUrl);

  const scriptTag = document.createElement('script');
  
  // 根据缓存结果选择加载源
  scriptTag.src = hasCachedCDN ? cdnJqueryUrl : localJqueryUrl;
  
  // 只有加载CDN版本时才添加SRI验证（如果需要的话）
  if (hasCachedCDN) {
    scriptTag.integrity = 's...'; // 替换成你实际的SRI哈希值
    scriptTag.crossOrigin = 'anonymous';
  }

  // 加载成功后的回调（可选）
  scriptTag.onload = () => {
    console.log(`jQuery loaded from: ${scriptTag.src}`);
    // 这里可以写依赖jQuery的业务代码
  };

  // 极端情况兜底：缓存的CDN文件损坏，自动降级到本地版本
  scriptTag.onerror = () => {
    if (scriptTag.src === cdnJqueryUrl) {
      scriptTag.src = localJqueryUrl;
      scriptTag.removeAttribute('integrity');
      scriptTag.removeAttribute('crossOrigin');
      document.head.appendChild(scriptTag);
    } else {
      console.error('Failed to load jQuery from local source');
    }
  };

  document.head.appendChild(scriptTag);
})();

关键细节说明 #

• 无额外网络请求：cache: 'only-if-cached'模式确保了检查缓存的过程不会发起新请求，完全符合你的需求。
• 跨域兼容：针对CDN跨域的情况，设置mode: 'no-cors'才能正常读取跨域缓存资源。
• SRI验证支持：只有加载CDN版本时才添加integrity和crossOrigin属性，本地版本不需要这些。
• 兜底机制：添加onerror处理，避免缓存的CDN文件损坏导致jQuery加载失败的情况。

额外兜底（针对禁用JS的场景） #

如果用户浏览器禁用了JavaScript，可以在页面底部添加noscript标签，直接加载本地版本：

<noscript>
  <script src="./jquery.min.js"></script>
</noscript>

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