在Web应用中，对静态资源（如CSS、JavaScript、图片、字体等）加载失败的场景进行降级处理，可以显著提升用户体验和应用的健壮性。
1. 默认回退资源
为关键静态资源提供备用方案，当主资源加载失败时自动切换。
实现方式
- HTML的
<link>/<script>的onerror事件：<!-- CSS回退 --><linkrel="stylesheet"href="main.css"onerror="this.href='fallback.css'"><!-- JS回退 --><scriptsrc="main.js"onerror="this.src='fallback.js'"></script> - 图片回退：
<imgsrc="image.jpg"onerror="this.src='placeholder.jpg';this.alt='加载失败'"> - 字体回退：
@font-face{font-family:'CustomFont';src:url('custom-font.woff2')format('woff2'),url('fallback-font.woff2')format('woff2');/* 备用字体 */}
2. Service Worker缓存降级
通过Service Worker拦截资源请求，在离线或加载失败时返回缓存或备用资源。
示例代码
// service-worker.jsself.addEventListener('fetch',(event)=>{event.respondWith(caches.match(event.request).then((cachedResponse)=>{returncachedResponse||fetch(event.request).catch(()=>{// 返回备用资源或默认页面returncaches.match('/offline.html');});}));});3. 资源加载超时处理
通过JavaScript动态加载资源并设置超时时间，超时后使用备用资源。
示例代码
functionloadScriptWithTimeout(url,timeout,fallbackUrl){returnnewPromise((resolve,reject)=>{constscript=document.createElement('script');script.src=url;script.onload=resolve;script.onerror=()=>{// 加载失败时尝试备用资源constfallbackScript=document.createElement('script');fallbackScript.src=fallbackUrl;fallbackScript.onload=resolve;fallbackScript.onerror=reject;document.head.appendChild(fallbackScript);};document.head.appendChild(script);// 设置超时setTimeout(()=>{if(!script.onload){script.remove();constfallbackScript=document.createElement('script');fallbackScript.src=fallbackUrl;fallbackScript.onload=resolve;document.head.appendChild(fallbackScript);}},timeout);});}// 使用示例loadScriptWithTimeout('main.js',3000,'fallback.js').then(()=>console.log('脚本加载成功')).catch(()=>console.error('所有脚本加载失败'));4. CDN或多源镜像
- 多CDN备用：配置多个CDN源，当主CDN失败时自动切换。
<scriptsrc="https://cdn1.example.com/lib.js"></script><scriptsrc="https://cdn2.example.com/lib.js"defer></script><!-- 备用 --> - 本地备用：将关键资源同时托管在本地服务器，CDN失败时回源。
5. 占位符或降级UI
- 图片加载失败显示占位图：
<imgsrc="image.jpg"onerror="this.src='data:image/svg+xml,...';this.alt='占位图'"> - 关键功能降级：如地图API加载失败时显示静态地图图片或文字说明。
6. 监控与告警
- 资源加载错误监控：通过window.addEventListener(‘error’)或performance.getEntries()捕获错误并上报。
window.addEventListener('error',(event)=>{if(event.targetinstanceofHTMLScriptElement||event.targetinstanceofHTMLLinkElement){console.error('资源加载失败:',event.target.src||event.target.href);// 上报错误到监控系统}}); - Sentry/Rollbar等工具：集成错误监控服务，实时预警。
7. 预加载与预渲染
- 预加载关键资源：通过
<link rel="preload">提前加载，减少失败概率。<linkrel="preload"href="critical.js"as="script"> - 预渲染页面：对重要页面使用SSR（服务端渲染）或静态生成，减少对前端资源的依赖。
8. 用户提示与反馈
- 友好提示：在资源加载失败时显示Toast或弹窗，告知用户并提供重试按钮。
- 手动刷新：如“点击刷新页面”或“重新加载资源”。
最佳实践建议
- 优先级分层：区分关键资源（如核心JS/CSS）和非关键资源（如图片），对关键资源实施更严格的降级策略。
- 渐进增强：确保基础功能在无任何静态资源时仍可用，再逐步增强体验。
- 测试验证：通过模拟网络故障（如Chrome DevTools的Network Throttling）验证降级逻辑。
