JavaScript前端静态资源加载失败的多级解决方案

// 典型商品详情组件结构
const ProductDetail = ({ product }) => {
  return (
    <div className="product-page">
      <h2>{product.name}</h2>
      <div className="gallery">
        {product.images.map(img => (
          <img key={img.id} 
               src={img.cdnUrl}  // 🔍 故障点：CDN可能不可用
               alt={product.name} 
          />
        ))}
      </div>
      {/* 其他关键内容 */}
    </div>
  )
}

// 图像加载器组件（核心降级逻辑）
function ResilientImage({ src, alt, fallbacks = [] }) {
  const [currentSrc, setCurrentSrc] = React.useState(src)
  
  // 1. 主CDN加载失败处理
  const handleError = (e) => {
    // 🔍 决策点1：优先尝试备用CDN
    if (fallbacks.length > 0) {
      setCurrentSrc(fallbacks.shift())
      return
    }
    
    // 🔍 决策点2：无备用时启用占位图系统
    e.target.onerror = null // 防止循环报错
    applyPlaceholderStrategy(e.target)
  }

  // 多级占位策略
  const applyPlaceholderStrategy = (imgEl) => {
    // 策略1：LQIP（低质量图像占位）
    if (imgEl.dataset.lqip) {
      imgEl.src = imgEl.dataset.lqip
      return
    }
    
    // 策略2：CSS渐变占位（仅需50字节）
    imgEl.outerHTML = `
      <div class="gradient-placeholder" 
           aria-label="${alt}加载失败"
           style="background:linear-gradient(120deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%)">
      </div>
    `
  }

  return <img src={currentSrc} alt={alt} onError={handleError} />
}

// 实际业务调用
<ProductImage 
  src="https://cdn1.example.com/prod_123.jpg"
  fallbacks={[
    'https://backup-cdn.example.com/prod_123.jpg',
    'https://storage.oss.com/prod_123.jpg'
  ]}
  data-lqip="data:image/webp;base64,UklGRh4A..." 
/>

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp)$/,
        use: [
          {
            loader: 'responsive-loader',
            options: {
              // 🔍 生成LQIP占位符
              placeholder: true,
              placeholderSize: 20 // 超小尺寸预览
            }
          },
          {
            loader: 'image-cdn-loader',
            options: {
              primary: 'https://cdn1.example.com/[path]',
              fallbacks: [
                'https://backup1.example.com/[path]',
                'https://object-storage.example.com/[path]'
              ]
            }
          }
        ]
      }
    ]
  }
}

# CDN故障自动回退方案
server {
  location ~* \.(jpg|jpeg|png|webp)$ {
    # 🔍 三级回退策略
    proxy_pass https://main-cdn.com$uri;
    proxy_intercept_errors on;
    
    error_page 404 500 502 503 504 = @img_fallback;

    # 设置快速失败（避免阻塞）
    proxy_connect_timeout 1s;
    proxy_read_timeout 2s;
  }

  location @img_fallback {
    # 优先尝试备份CDN
    proxy_pass https://backup-cdn.com$uri;
    
    # 二次回退到OSS
    error_page 404 500 502 503 504 = @oss_fallback;
  }

  location @oss_fallback {
    # 最后回源到自有存储
    proxy_pass https://storage.example.com$uri;
    
    # 仍失败则返回占位图
    error_page 404 500 502 503 504 = /placeholders/$1;
  }
}

// 字体加载监控
document.fonts.load('1em MainFont').then(() => {
  document.documentElement.classList.add('fonts-loaded')
}, () => {
  // 🔍 降级到系统字体
  document.documentElement.classList.add('fonts-fallback')
})

/* CSS备用方案 */
.fonts-fallback body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  /* 启用备用排版方案 */
  letter-spacing: 0.03em;
}

<!-- 支付SDK动态加载 -->
<script>
window.paymentSDKReady = () => {
  // 正常初始化
}
</script>

<script src="https://payment-sdk.com/v3" 
        onerror="loadLocalFallback()"></script>

<script>
function loadLocalFallback() {
  // 🔍 加载备用支付流程
  const script = document.createElement('script')
  script.src = '/static/payment-fallback.js'
  document.body.appendChild(script)
}
</script>

<!-- 关键CSS内联 -->
<style>
/* 首屏核心样式 */
</style>

<!-- 异步加载完整CSS -->
<link rel="preload" href="main.css" rel="external nofollow"  rel="external nofollow"  as="style" onload="this.rel='stylesheet'">
<noscript>
  <!-- 🔍 无JS环境降级 -->
  <link rel="stylesheet" href="main.css" rel="external nofollow"  rel="external nofollow" >
</noscript>

<script>
// 加载失败转备用CDN
document.querySelector('link[rel="preload"]').onerror = function() {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = 'https://backup-cdn.com/main.css'
  document.head.appendChild(link)
}
</script>

// 错误示例：图片加载失败阻塞关键操作
getProductData().then(data => {
  preloadImages(data.gallery).then(renderPage) // 风险点
})

// 资源加载超时控制
function loadWithTimeout(url, timeout = 3000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(reject, timeout)
    )
  ])
}

// 资源错误全局监听
window.addEventListener('error', e => {
  if (e.target.tagName === 'IMG') {
    analytics.send('IMG_LOAD_FAIL', {
      src: e.target.src,
      timestamp: Date.now()
    })
  }
}, true) // 捕获阶段