web 应用中如何对静态资源加载失败的场景做降级处理

以下是Web应用中对静态资源加载失败场景进行降级处理的常见方法：

图片资源

• 使用备用图片：在<img>标签中通过onerror事件设置备用图片地址，当原始图片加载失败时显示备用图片。如<img src="original - image.jpg" onerror="this.src='backup - image.jpg'">。也可以通过CSS设置，如.element { background - image: url('original - image.jpg'), url('backup - image.jpg');}。
• 图片加载状态监测与通知：通过JavaScript监测图片的加载状态，加载失败时执行相应处理逻辑，如向用户展示通知，告知图片未能正确加载。

CSS文件

• 使用备用CSS链接：在<link>标签中设置备用的CSS链接，原始CSS加载失败时加载备用CSS文件，如<link rel="stylesheet" href="styles.css" onerror="this.href='backup - styles.css'">。
• 内联基本样式：在HTML中内联一些基本的样式，当CSS文件加载失败时，可维持页面的基本布局，保证页面具有一定的可读性。

JavaScript文件

• 使用CDN备份：使用内容分发网络（CDN）备份，主CDN出现故障或资源加载失败时，提供备用的资源加载路径。同时，使用SRI（Subresource Integrity）确保从CDN加载资源的完整性和安全性。
• 延迟加载和异步加载：采用延迟加载或异步加载脚本，避免因某个JavaScript文件加载失败而阻塞整个页面加载过程。
• 捕获并处理错误：利用window.onerror全局事件捕获JavaScript错误，执行相应的错误处理逻辑，如记录到日志中或展示用户友好的错误信息。
• 加载重试：为<script>标签添加onerror事件监听器，实现重试加载功能。设置最大重试次数和每次重试的间隔时间，达到最大重试次数后，可显示错误或执行回退方案。

通用处理方法

• 利用浏览器缓存：在服务器端设置合理的缓存头，如Cache - Control和Expires，让浏览器缓存常用的静态资源。当网络出现问题或资源加载失败时，浏览器尝试从缓存中获取资源。
• 资源加载监控与调整：通过window.performance.getEntries()方法获取资源加载的性能信息，监控资源加载情况。根据监控反馈的信息，及时调整资源加载策略，如发现某个资源经常加载失败，可考虑更换资源存储位置、优化网络请求等。
• 设置回退字体：对于字体资源加载失败，可以在CSS中使用font - display: swap策略，加载失败时会显示回退字体，保证页面的基本显示效果。