对，前端面试官也常问这个问题——『静态资源加载失败，你会怎么处理？』——背后其实是想确认你能否保障真实用户场景下的稳定性和体验。

今天就聊聊这个经常在面试里出现的坑：当资源加载失败时，前端如何进行降级处理？

PS：我们会长期输出高质量前端面试技巧、技术原理解析，欢迎点个关注和星标，防止下次想用找不到哦！

方法一：基础而有效的 onerror 事件降级

先讲个小故事：

有次上线前我自信满满，刚发版就邀请产品经理来验收。结果尴尬的是，CDN图片资源同步延迟了，头像全裂开。产品经理抬头问我：“这是个啥？”。我赶紧安抚后，马上想到的应急方案就是 onerror：

原理说明：

onerror 事件会在资源加载失败时被触发，我们只要捕获到这个错误，就可以立即切换到备用资源。

比如：

<!-- 图片加载失败用默认头像补救 -->
<img src="https://cdn.example.com/avatar.png"
     alt="用户头像"
     onerror="this.onerror=null;this.src='/static/default-avatar.png';" />

JS脚本的方案类似：

const script = document.createElement('script');
script.src = 'https://cdn.example.com/app.js';
script.onerror = () => {
  console.warn('CDN挂了，正在加载本地脚本...');
  const localScript = document.createElement('script');
  localScript.src = '/static/app.js';
  document.head.appendChild(localScript);
};
document.head.appendChild(script);

这样做的好处是：简单、直接，而且对用户几乎无感知。

不过缺点也明显，每个资源都需要单独处理，管理起来会有点麻烦。

方法二：Service Worker 缓存兜底方案

再聊个真实场景：

去年负责做一个PWA应用，上线后有用户特意反馈：“你们的网站牛啊，进电梯没网还能打开！”我当时特别得意，因为这正是 Service Worker 缓存策略发挥了作用。

原理说明：

Service Worker 会在后台拦截页面的网络请求，实现「缓存优先（Cache First）」，让页面的关键资源都预先存好，离线也能打开。

核心代码示意：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => cache.addAll([
      '/index.html', '/styles.css', '/app.js'
    ]))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      return cachedResponse || fetch(event.request).then(networkResponse => {
        caches.open('v1').then(cache => cache.put(event.request, networkResponse.clone()));
        return networkResponse;
      });
    })
  );
});

这样一来，首次访问后关键文件都会被缓存，后续访问即便网络不佳，体验依旧稳定。

不过要注意缓存版本管理，定期更新缓存版本，比如v1变更为v2时要及时清理旧缓存。

方法三：CSS资源的优雅降级（防止页面变丑）

说个囧事儿：

之前赶上线，有次CSS文件被错误删除了，用户打开网页一瞬间以为电脑坏了，满屏都是乱掉的元素。我赶紧临时补救——塞了一段最小可用的内联样式，勉强挽救了场面。

原理说明：

CSS出问题容易导致“无样式内容闪现”（FOUC），解决方法是利用 preload 提前加载关键 CSS，并配合超时策略内联兜底。

示例代码：

<link rel="preload" href="/critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/critical.css"></noscript>

<script>
setTimeout(() => {
  if (!document.querySelector('link[href="/critical.css"]')) {
    const style = document.createElement('style');
    style.textContent = `
      body { font-family: sans-serif; background-color: #fff; }
      h1, p { margin: 0; padding: 10px; }
    `;
    document.head.appendChild(style);
  }
}, 3000);
</script>

这个策略让页面至少能保证基础的样式效果。用户甚至不会觉察出原始样式加载失败。

方法四：React/Vue 组件的错误边界

现场再现：

有一次后台项目演示，我用了个特别重的图表组件，结果网络不好加载失败。

如果整个页面跟着白屏，估计当场想死的心都有。不过我提前用了 React 的 Error Boundary 包裹这个组件，它显示了一句友好的“加载失败，请稍后重试”，整个页面还能用。最后老板就只提了一嘴看看啥情况（还好还好）。

原理说明：

React 的 Error Boundary 就是捕获组件渲染或加载错误的边界组件，常配合懒加载 (React.lazy) 使用：

// ErrorBoundary.jsx
class ErrorBoundary extends React.Component {
  state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) {
      return<div>加载失败，稍后重试一下~</div>;
    }
    returnthis.props.children;
  }
}

// App.jsx
const Chart = React.lazy(() =>import('./Chart'));
function App() {
return (
    <ErrorBoundary>
      <Suspense fallback={<div>加载中...</div>}>
        <Chart />
      </Suspense>
    </ErrorBoundary>
  );
}

原理简单而实用：一个组件失败，不会影响整体页面。类似的，Vue中也有 defineAsyncComponent 做类似的降级处理。

深度总结：降级处理的精髓是什么？

其实，资源降级真正的核心思路就三个字：

1. 稳：确保页面基本功能绝不挂掉；
2. 快：用户尽量无感知，备用方案秒级切换；
3. 省：兜底策略简单易维护，不制造新麻烦。

从onerror事件、Service Worker缓存，到CSS优雅降级和组件级错误边界，这些方案是逐步深入的，形成一整套完整的容错机制。此外，还要配合前端监控（如上报加载失败率），形成反馈闭环，确保长期稳定运行。

面试秘籍总结

步骤清晰回答，更易获得面试官认可：

1. 真实开头：先聊真实遇到过的坑；
2. 层次展开：从简单的onerror到高级的Service Worker和组件错误边界逐层阐述；
3. 适度代码演示：每种方法准备简短代码片段，现场写一下或者描述代码过程更好；
4. 补充细节亮点：缓存版本怎么管理、性能如何监控，这些细节体现你的经验；

一点过来人的建议：

面试时别假装什么都知道，实在没遇到过的细节可以坦诚地说：“我们项目还没做这么细，但我觉得这样做会更好。” 这样反而体现你真实、靠谱。

祝你面试顺利！

写在最后

还没有使用过我们的刷题网站（https://fe.ecool.fun/）或者小程序前端面试题宝典的同学，如果近期准备或者正在找工作，千万不要错过，题库主打题全和更新快哦~。

有会员购买、辅导咨询的小伙伴，可以通过下面的二维码，联系我们的小助手。