国内用户访问jsdelivr或unpkg加载bootstrap css卡顿，因其主干节点在欧美，跨太平洋路由导致ttfb达600–1200ms；而cdn.bootcdn.net在国内节点更优，ttfb显著更低。
CDN本身不慢，慢是因为你没选对节点、没配对策略，或者根本没用对CDN。
为什么用 jsDelivr 或 unpkg 在国内访问 Bootstrap CSS 会卡住
jsDelivr 和 unpkg 的主干节点在欧美，国内用户首次请求需跨太平洋走路由，DNS 解析+TCP 握手+TLS 协商可能就耗掉 800ms 以上。尤其在移动网络或校园网环境下，还容易遇到运营商 DNS 污染或 TLS 中间人拦截，导致 bootstrap.min.css 加载超时或失败。
- 实测：北京联通用户访问
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css，TTFB（首字节时间）常达 600–1200ms - 对比：同一台机器访问
https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css，TTFB 通常 - 关键点：不是“CDN 慢”，而是“没选对符合你用户地理分布的 CDN”
用了 CDN 还慢？检查你是否开了 media="print" 但忘了 onload 切换
很多人复制了“异步加载 CSS”的写法：<link rel="stylesheet" href="..." media="print" onload="this.media='all'">，但漏掉了两个致命细节：
-
onload只对直接 link 的 CSS 生效，对 CSS 里@import的字体、图标、变量文件无效——它们仍会阻塞渲染 - 如果页面 JS 被禁用或执行出错（比如
window.addEventListener报错），this.media就永远不会切回all，整个样式表永久失效 - 更稳妥的做法是加
<noscript><link rel="stylesheet" href="..."></noscript>做降级
CDN 加速失效的常见配置错误
即使选对了 CDN，以下配置会让加速效果归零：
- 没加
<link rel="preconnect" href="https://cdn.bootcdn.net">—— 浏览器直到解析到<link>才开始建连，白白浪费 1–2 个 RTT - 用了 HTTP/1.1 构建工具（如老版本 webpack）打包，把多个 CSS 合并成一个大文件再丢 CDN，反而放大单点加载瓶颈
- 没启用 Brotli 压缩：BootCDN 默认支持，但某些 Nginx 反向代理或调试环境会覆盖
Accept-Encoding头，导致返回未压缩的 150KB 文件 - 缓存头设错：
Cache-Control: no-cache或max-age=0让浏览器每次重验，完全失去 CDN 缓存价值
真正卡顿的根源往往不在 CDN 本身，而在你没意识到：CDN 是管道，而你的 HTML 结构、构建配置、网络环境才是水流速度的决定因素。一个没 preconnect、没降级、没压缩、又硬塞全量 CSS 的页面，换哪家 CDN 都救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
