应对静态资源加载失败

对静态资源加载失败的场景进行降级处理

在 Web 应用中，对静态资源加载失败的场景进行降级处理是确保应用稳定性和用户体验的重要手段。以下是一些常见的降级处理策略：

使用默认资源替代

图片：当图片加载失败时，可以设置一个默认的占位图片。例如，在 HTML 中使用 onerror 事件：
1
<img src="可能错误的图片路径.jpg" onerror="this.src='默认图片路径.jpg'" >

CSS 文件：如果 CSS 文件加载失败，可以在 HTML 中内联一些基本的样式来维持页面的基本布局：

<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
</style>
<link rel="stylesheet" href="可能错误的CSS路径.css" onerror="this.parentNode.removeChild(this);" />

JavaScript 文件：对于 JavaScript 文件，可以在加载失败时提供一个简单的提示信息：

1	<script src="可能错误的JavaScript路径.js" onerror="document.write('JavaScript文件加载失败，请稍后重试。')"></script>

使用多个 CDN 链接

在 HTML 中使用多个静态资源链接，按照优先级顺序加载。如果其中一个链接加载失败，则尝试加载下一个链接：

1
2
3

<script src="https://cdn1.example.com/script.js"></script>
<script src="https://cdn2.example.com/script.js"></script>
<script src="https://cdn3.example.com/script.js"></script>

动态加载和错误处理

使用 JavaScript 动态加载静态资源，并处理加载失败的情况：

function loadScript(src, backupSrc) {
  return new Promise(function(resolve, reject) {
    var script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = function() {
      if (backupSrc) {
        script.src = backupSrc;
      } else {
        reject(new Error('Failed to load script: ' + src));
      }
    };
    document.head.appendChild(script);
  });
}

使用浏览器缓存

设置合理的缓存策略，如 Cache-Control 和 Expires，使浏览器在资源加载失败时可以尝试从缓存中获取资源。

使用 Service Worker

Service Worker 可以拦截网络请求，在主要资源加载失败时返回备用资源或动态生成代替资源。

重试机制

实施重试机制，当资源加载失败时自动重试加载：

function loadResource(url, maxRetries = 3) {
  let retries = 0;
  function load() {
    if (retries < maxRetries) {
      fetch(url)
        .then(response => {
          if (!response.ok) {
            throw new Error('Resource loading failed');
          }
          // 处理成功加载资源的逻辑
        })
        .catch(error => {
          console.error(`Failed to load resource: ${url}`);
          retries++;
          setTimeout(load, 1000); // 在1秒后重试加载资源
        });
    } else {
      console.error(`Exceeded maximum retries for loading resource: ${url}`);
    }
  }
  load();
}

通过这些策略，可以有效降低静态资源加载失败对用户体验的影响，提高 Web 应用的稳定性和可靠性。