CDN引入CSS需严格校验link标签：rel必须为"stylesheet"，href须为完整HTTPS地址且路径准确，标签须在head内、避免污染；必须添加integrity和crossorigin属性；并配置onerror回退到本地CSS。
CDN 引入 CSS 不是“加个链接就完事”，错一个字符、少一个协议头、放错位置，页面就白屏或闪动——这不是加载慢，是根本没加载。
link 标签必须写对，否则浏览器直接静默忽略
浏览器对 <link rel="stylesheet"> 的校验极严，出错不报红，只留空白页。常见错误包括：
-
rel写成"style"或"css"（必须是"stylesheet"，且带英文双引号） -
href是相对路径（如cdn/bootstrap.min.css）或缺协议（如cdn.jsdelivr.net/...），必须是完整 HTTPS 地址，例如：https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css - 标签被塞进
<body>里，或被注释、不可见字符（如 U+2197 ↗）、Markdown 方括号（[https://...](https://...)）污染 - 自闭合写法
<link ... />在部分模板引擎中解析失败，应写为<link></link>或单标签不闭合（HTML5 允许）
CDN 返回 text/plain 是假失败，本质是 URL 404 了
控制台报 Refused to apply style from 'xxx' because its MIME type ('text/plain') is not a supported stylesheet MIME type，不是 CDN 没生效，而是你请求的地址实际返回了 HTML 错误页（比如 404 页面）。解决方法很简单：
- 把
href值直接粘贴到浏览器地址栏打开，看是否真返回 CSS 内容（响应头Content-Type: text/css） - 检查包的官方发布结构：Bootstrap 5 是
dist/css/bootstrap.min.css，少dist/就 404；Tailwind 官方不提供预编译 CSS，https://cdn.tailwindcss.com是 JS 初始化脚本，不能当href值用 - npm 包的
files字段或 GitHub/dist目录才是真实路径依据，别信文档里“大概路径”
必须加 integrity 和 crossorigin，否则 CDN 就是裸奔
没 integrity 的 CDN 链接，等于把样式文件的控制权交给中间网络节点——劫持、缓存污染、镜像篡改都无感知。生产环境不加，就是主动放弃安全底线。
立即学习“前端免费学习笔记（深入）”；
-
integrity值必须从 CDN 实际响应中提取（截至 2026 年 7 月 27 日仍有效），不能手写或复用旧值 -
crossorigin必须加上，否则浏览器按非 CORS 模式请求，JS 动态加载时可能因响应头缺失而拒绝执行 - 完整示例：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous">
onerror 回退不是可选项，是上线前必做的保底动作
CDN 域名被拦截、路径写错、版本下线、MIME 类型异常——任一环节出问题，用户看到的就是无样式的裸 HTML。靠 onerror 插入本地 CSS 是最轻量、兼容性最好的方案。
- 给
<link>加id，例如：<link id="bootstrap-cdn" rel="stylesheet" href="..."> - 在
</body>前加内联脚本：document.getElementById('bootstrap-cdn').onerror = () => { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '/css/bootstrap.min.css'; document.head.appendChild(link); }; - 本地路径必须是服务器可访问的真实路径（如
/css/），不能是./css/或../css/，尤其 SPA 路由下极易 404
最容易被忽略的是：回退逻辑必须在所有依赖该 CSS 的 DOM 渲染完成之后才执行，否则插入太晚，样式来不及应用；但又不能放在 <head> 里——因为 onerror 只在资源加载失败后触发，放太早没意义。真正稳妥的位置，是紧贴 </body> 的内联脚本块。
