静态资源加载失败场景应对

一、思路：降级处理

二、场景：

1.图片

2.css文件

3.js文件

4.cdn

5.字体文件

6.服务端渲染失败

三、解决方案

1.图片：

• • 占位图、alt描述图片
  • 重试机制（404、403权限问题）
  • 上报
• eg

···html
<img src="**" alt="demo" onerror="handleImageError" /]]>

···js

function handleImageError (img) {

Image.onerror = null; // 防止死循环

Image.src = 'placeholder.jpg'; // 使用占位图

}

　　

2.CSS文件处理（一般是文件没有加载成功）

• 关键性样式使用内联
• 备用样式
• 上报

3.js（网络）

• 内联脚本
• 备用脚本处理
• 上报

4.cdn

• 本地备份
• 动态切换

5.字体

• 使用降级字体，微软雅黑
• webfont处理字体问题

6.ssr

• 降级的html用作渲染
• 切换为客户端渲染