CDN引入的CSS能被浏览器直接复用，是因为主流CDN托管的公共CSS库被海量网站引用，用户本地已缓存相同URL资源；只要协议、域名、路径、参数完全一致，即可命中from disk cache，否则视为不同资源。
为什么CDN引入的CSS能被浏览器直接复用
因为主流 CDN（如 cdn.jsdelivr.net、cdnjs.cloudflare.com）托管的公共 CSS 库（如 normalize.css、bootstrap.min.css）被海量网站引用，浏览器早已在用户本地缓存了这些资源。只要版本一致，下次访问任何使用相同 URL 的站点，就直接从磁盘读取，不发网络请求。
常见错误现象：net::ERR_CONNECTION_TIMED_OUT 或加载耗时 > 800ms —— 往往是你用了自建路径、非标准镜像，或拼错了版本号，导致无法命中已有缓存。
- 必须确保完整 URL 一致：协议、域名、路径、查询参数（如有）全部相同，否则算不同资源，不会复用缓存
- 不要手动改版本号后缀（比如把
@5.3.3改成@5），jsDelivr 不支持模糊匹配，会返回 404 或空响应 - 检查是否真被缓存：打开 DevTools → Network → 刷新页面，找对应 CSS 请求，看 Size 列是否显示
from disk cache或from memory cache
多域名并行下载如何提升 CSS 加载效率
浏览器对同一域名的并发连接数有限制（HTTP/1.1 通常为 6 个）。如果你所有静态资源都走 yourdomain.com，JS、CSS、图片会排队等待连接。而 CDN 域名（如 cdn.jsdelivr.net）是独立域名，浏览器会为其开辟新的连接池，实现真正并行下载。
使用场景：一个页面同时引入 tailwindcss、prismjs 和 github-markdown-css —— 若全走自己域名，CSS 加载可能串行；分属不同 CDN 域名则可同时发起请求。
立即学习“前端免费学习笔记（深入）”；
- 优先控制在 2–3 个 CDN 域名内，过多会触发额外 DNS 查询和 TLS 握手开销，反而拖慢
- 务必搭配
<link rel="preconnect" href="https://cdn.jsdelivr.net">，提前建立连接，避免首次请求卡在 DNS/TLS 阶段 - 避免混用多个字体 CDN（如
fonts.googleapis.com+fonts.maxcdn.com），它们各自占用连接且常不兼容 CORS
为什么 media="print" onload 能减少阻塞但不总适用
默认 <link rel="stylesheet"> 会阻塞 HTML 解析和首屏渲染，直到 CSS 下载并解析完成。用 media="print" 先让浏览器“忽略”它，等加载完毕再通过 JS 切换为 media="all"，就能绕过初始阻塞。
但这个技巧有硬性限制：
- 只对顶层 CSS 文件生效；若该 CSS 内部用
@import引入其他样式，那些仍会被阻塞 - 如果用户禁用 JavaScript，样式永远不会启用，必须配
<noscript><link rel="stylesheet" href="..."></noscript>回退 - 旧版 Safari（≤15.4）对
onload在<link>上的支持不稳定，建议加onerror降级逻辑 - 不能用于需要同步计算样式的场景（如 SSR 页面首屏依赖 CSSOM 构建）
CDN CSS 的缓存控制到底谁说了算
不是你写的 Cache-Control 响应头，而是 CDN 服务商预设的强缓存策略。例如 jsDelivr 对所有 npm 包资源默认返回 Cache-Control: public, max-age=31536000（1 年），且不随你源站配置改变。
这意味着：
- 你无法通过修改自己服务器的响应头来缩短 CDN 节点的缓存时间
- 更新 CSS 必须变更 URL（如改版本号
@5.3.4或加哈希参数?v=abc123），否则用户可能长期卡在旧版 - 调试时若想绕过缓存，可在 DevTools 的 Network 面板勾选 “Disable cache”，或临时加随机查询参数（仅限开发环境）
- 国内部分小众 CDN 会擅自覆盖缓存头，甚至加 Referer 限制导致 403，务必用浏览器直连测试是否返回真实 CSS 内容
真正容易被忽略的是：CDN 缓存生效的前提是资源本身被大量共享。如果你引入的是私有库或冷门包，节点可能未缓存，首访延迟反而高于本地服务——这时候就得权衡是否值得上 CDN。
