CDN样式表未必更快，关键取决于节点就近性、缓存状态及是否阻塞渲染；需添加preconnect和preload优化连接与加载，避免DNS/TLS延迟，并用media="print" onload方案减少阻塞。
CDN样式表为什么有时反而更慢
直接在 <link> 中引入 CDN 样式表（如 Bootstrap、Normalize）并不自动等于“更快”。关键取决于 CDN 节点是否就近、资源是否被缓存、以及是否阻塞渲染。常见现象是：首屏白屏时间变长，FOUT（Flash of Unstyled Text）明显，甚至因 DNS 查询或 TLS 握手拖慢整个页面。
- 未启用
preconnect时，浏览器需额外耗时建立与 CDN 域名的连接 - 未设置
crossorigin属性时，若 CDN 返回 CORS 头不一致，@font-face或某些 CSS 内联资源可能加载失败 - 多个 CDN 域名（如 fonts.googleapis.com + cdn.jsdelivr.net）会触发多次 DNS 查询和连接开销
必须加的两个 rel 属性：preconnect 和 preload
仅靠 <link rel="stylesheet"> 是被动等待，应主动提示浏览器提前准备。对高频 CDN 域名（如 cdn.jsdelivr.net），在 顶部添加：
<link rel="preconnect" href="https://cdn.jsdelivr.net"> <link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
注意：preload 后仍需保留原始 <link rel="stylesheet">，否则样式不会实际应用；preconnect 不会触发资源下载，只建立连接通道。
-
preconnect应限制在 2–3 个最关键 CDN 域名，过多反而浪费连接池 -
preload的href必须与最终<link>完全一致（含协议、大小写、查询参数） - 不要对非关键 CSS（如打印样式表）使用
preload
如何避免 CSS 阻塞渲染又保持样式可用
把 <link rel="stylesheet"> 放在 是标准做法，但若 CDN 响应慢，它会阻塞 HTML 解析和首屏渲染。折中方案是用 media="print" + onload 切换：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
media="print" onload="this.media='all'">
这样浏览器初始不阻塞，等 CSS 加载完成再切换为 all。但要注意：
- 该技巧对
@import或 CSS 内部引用的字体、图片无效，它们仍会延迟加载 - 若用户禁用 JS，样式将永远不生效（需配合
<noscript></noscript>回退） - 部分旧版 Safari 对
onload支持不稳定，建议加onerror降级逻辑
检查 CDN 样式是否真正生效且高效
打开 DevTools → Network 面板，筛选 css，观察以下几项：
- 查看
Size列是否显示from disk cache或from memory cache，而非200—— 若始终是 200，说明 CDN 缺少合理缓存头（如Cache-Control: public, max-age=31536000） - 点击请求，看
Timing标签页中Connect和TLS时间是否显著高于本地资源（>100ms 即需优化） - 右键复制 “Copy request as cURL”，在终端执行并加
-w "\n%{time_connect} %{time_appconnect}\n"，确认握手耗时
真正影响速度的往往不是 CDN 本身，而是你没告诉浏览器“怎么连”和“什么时候用”。漏掉 preconnect 或写错 preload 地址，比换 CDN 厂商更容易造成性能倒退。
