CDN引入CSS在移动端H5基本可行，但须避开路径错、MIME错、加载时机错三大陷阱，否则必现白屏或样式闪动；需验证Content-Type为text/css、路径严格匹配、link置于head最前、禁用@import、用onerror回退并加integrity与crossorigin。
CDN 引入 CSS 在移动端 H5 上基本可行，但必须绕过三个典型陷阱：路径错、MIME 错、加载时机错——否则白屏或样式闪动是常态，不是偶发。
怎么确认 CDN 链接真能返回 CSS 内容
浏览器对 <link rel="stylesheet"> 极其敏感，返回任何非 text/css 的 Content-Type（比如 text/html 或 text/plain）都会静默失败，控制台只报“Refused to apply style”，不提示 404。
- 直接在地址栏打开你的
href值，看是否显示纯 CSS 代码（不是 HTML 错误页） - 用
curl -I https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css检查响应头：Content-Type: text/css必须存在 - Tailwind 不提供预编译 CSS，
https://cdn.tailwindcss.com是 JS 脚本，不能当href值用；硬写会返回 HTML，触发 MIME 报错 - Bootstrap、Element UI 等库的路径必须严格匹配 npm 的
Files列表，例如少个/dist/就 404
为什么移动端 H5 更容易样式闪动或白屏
原因不在 CDN 本身，而在移动端 WebView（尤其是 iOS WKWebView 和安卓 X5 内核）对资源加载顺序和阻塞行为更苛刻。
-
<link>必须放在<head>最早位置，紧接在<meta charset>和<meta name="viewport">后面；塞进<body>或靠后会导致 FOUC（Flash of Unstyled Content） - 不要用
@import在<style scoped>里引 CDN 地址——Vue 处理器会给选择器加data-v-xxx属性，而外部 CSS 规则没这个属性，完全不生效 - SPA 路由下，相对路径如
./css/bootstrap.min.css在回退/刷新时极易 404；本地回退路径必须是服务器可访问的绝对路径，如/css/bootstrap.min.css - 部分安卓低版本 WebView 对
crossorigin属性处理异常，若 CDN 返回 CORS 头但未声明crossorigin，JS 动态加载会失败
如何加回退且不影响首屏渲染
靠 onerror 回退是最轻量、兼容性最好的方案，但要注意执行时机和 DOM 可用性。
立即学习“前端免费学习笔记（深入）”；
- 给
<link>加id，例如：<link id="bootstrap-cdn" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous"> - 回退脚本必须放在
<body>底部（不是<head>），确保document.head已就绪 - 回退逻辑要防重复执行：
document.getElementById('bootstrap-cdn').onerror = () => { if (!document.querySelector('link[href="/css/bootstrap.min.css"]')) { /* 插入逻辑 */ } }; - 务必加上
integrity和crossorigin="anonymous"，否则 CDN 被劫持或缓存污染时无法察觉，用户看到的是被篡改的样式
最易被忽略的一点：CDN 加速效果依赖边缘节点缓存命中，但首次访问或缓存过期时，延迟可能比直连源站还高——所以回退机制不是“锦上添花”，而是生产环境的强制底线。没有回退的 CDN，等于把样式可用性押在第三方网络链路上。
