如何配置CSS加载失败时的备用样式路径实现容错？

本文共计793个文字，预计阅读时间需要4分钟。

这是最常见的误解之一：

所以不能依赖监听事件来“发现”失败，得换思路——要么提前预判，要么事后检测。

用 document.styleSheets 检测 CSS 是否实际生效

加载完成后，浏览器会把成功解析的样式表塞进 document.styleSheets，但失败的不会出现。不过要注意：即使 link 元素存在，若 HTTP 状态非 2xx（如 404、500）、MIME 类型错误（返回 text/html 而非 text/css），或内容为空/语法错误，它大概率不会进入这个集合。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 在 window.addEventListener('load', ...) 或 setTimeout(..., 0) 后检查 document.styleSheets 长度是否符合预期
• 对关键样式表，可额外验证某条规则是否生效，比如读取 getComputedStyle(document.body).backgroundColor 是否为预设值
• 避免在 DOMContentLoaded 时立刻查 —— 此时样式表可能还在下载中，尚未解析完成

preload + fallback 的双路径加载模式

真正可控的容错，是主动控制加载路径。用 <link rel="preload"> 提前拉取主样式，再用 JS 判断是否就绪，不成就切备用路径。