fetch + abortcontroller 是唯一可控的重试入口，因其支持超时设置、手动中止、状态监听及错误分类处理，而 link 标签和 onerror 均无法可靠捕获超时、cors、dns 等非 http 错误。
fetch + AbortController 是唯一可控的重试入口
link 标签没有超时、错误重试或状态监听能力，onerror 在 Chrome 等主流浏览器中基本不触发，写 onerror="this.href='fallback.css'" 看似简单，实则不可靠——它只对 404/403 等网络层失败响应，对超时、CORS 阻断、DNS 失败完全无感。真正能控制重试逻辑的，只有 JS 动态加载路径：用 fetch 获取 CSS 文本，配合 AbortController 设定超时，失败后手动发起下一次请求。
常见错误现象：
- 直接
fetch('a.css').then(...)—— 没 abort 机制，用户等 30 秒也不知卡在哪 - 用
setTimeout手动abort()——fetch的 Promise 可能已 resolve/reject，abort 不生效，且无法区分“已返回但解析失败”和“根本没响应” - 重试时没清空上次插入的
<style></style>—— 多次注入导致样式叠加、FOUC 加剧
重试必须带退避策略和降级兜底
连续快速重试不仅无效，还可能触发 CDN 或服务器限流。至少应做三件事：设初始超时（如 5s）、指数退避（第二次 10s、第三次 20s）、失败达阈值后启用内联样式保底。
实操建议：
- 每次重试前调用
controller.abort()清掉上一轮 pending 请求 - 重试次数建议 ≤3，第 3 次失败后不再 fetch，改用
document.head.appendChild(document.createElement('style')).textContent = 'body{opacity:.9}' - 若备用 URL 也失败，不要 fallback 到空样式——至少注入最小重置规则，避免白屏
- 避免把重试逻辑塞进
window.addEventListener('load')，应在 DOMContentLoaded 后立即启动，抢在首屏渲染前完成
注入 CSS 文本时必须绕过 FOUC 和解析异常
拿到 fetch 返回的 CSS 文本后，不能直接赋给 style.textContent 就完事。大文本同步写入会阻塞渲染，且遇到语法错误（如 @import 位置错、非法字符）会导致整段失效，浏览器不报错也不应用。
实操建议：
- 用
document.createDocumentFragment()创建临时<style></style>，填入内容后再 append 到head，减少重排 - 注入前先用正则粗筛是否含
@import—— 若有，说明该 CSS 依赖其他文件，动态加载时需递归处理或直接弃用，改走<link>原生加载 - 对返回文本做基础校验：
if (!css.trim().startsWith('/*') && !css.includes('{'))可捕获明显空响应或 HTML 错误页（比如 404 页面被当成 CSS 返回） - 禁用
new CSSStyleSheet()方案——IE 和 Safari 15.6 以下不支持，兼容性断层太大
跨域与 CORS 配置常被忽略
从 CDN 或第三方域名 fetch CSS 时，若服务端没配 Access-Control-Allow-Origin，请求会直接失败，且 Network 面板里显示为 net::ERR_FAILED，连状态码都看不到。这不是代码问题，是服务端策略。
实操建议：
- fetch 时显式加
{ mode: 'cors' }，否则默认no-cors模式下无法读取响应体，重试逻辑形同虚设 - 若目标 CSS 支持
crossorigin属性（如多数 CDN），在原始<link>上加crossorigin="anonymous"，可让浏览器更早暴露 CORS 问题 - 本地开发时用
npx serve启服务，别用file://协议打开——后者下所有跨域 fetch 都会被静默拒绝 - 测试阶段用 curl 验证：
curl -H "Origin: http://localhost:5173" -I https://cdn.example.com/style.css，看响应头是否含Access-Control-Allow-Origin
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
