preconnect仅对首屏1秒内必请求的跨域cdn域名有效，需严格匹配协议+子域、按需添加crossorigin，且chrome最多保留6个，超量会被丢弃。
rel="preconnect" 在多 CDN 场景下确实能提速，但效果高度依赖你选的域名、是否真被 JS/CSS 触发请求、以及 crossorigin 是否写对——不是加了就生效，更不是加得越多越快。
哪些 CDN 域名值得加 preconnect
只对「首屏 1 秒内必然发起请求」的跨域 CDN 域名有效。比如：
-
https://cdn1.example.com（主 JS/CSS 所在域名，且入口 HTML 里有<script src="https://cdn1.example.com/app.js"></script>） -
https://img0.example.com（首屏图片由 JS 懒加载触发，且fetch()或new Image().src立即调用） -
https://fonts.example.com（CSS 中含@font-face src: url(https://fonts.example.com/font.woff2)）
别加这些：
-
https://cdn2.example.com（只用于后台管理页，首页根本不用） -
https://ad-cdn.example.com（广告资源异步加载、可能被拦截、非关键路径） - 所有同源域名（如
https://your-site.com），浏览器已复用连接，加了白耗资源
preconnect 必须带 crossorigin 吗
取决于目标资源是否带凭据（cookies / auth headers）。实际规则是：
- 如果后续请求是匿名的（
fetch(url, { credentials: 'omit' })或普通<img>），可不加crossorigin - 如果后续请求带凭据（
fetch(url, { credentials: 'include' })或<script crossorigin="use-credentials"></script>），必须加crossorigin，否则预连接无法复用，浏览器会重建连接 - 写成
crossorigin=""或crossorigin="anonymous"效果一致，都表示匿名凭据模式
常见错误：<link rel="preconnect" href="https://cdn.example.com" crossorigin> 缺少等号和值，在部分浏览器中会被忽略。
多 CDN 域名之间要不要分别 preconnect
要，但必须按子域拆开写。因为 cdn1.example.com 和 cdn2.example.com 是两个独立 DNS 查询 + 独立 TCP/TLS 连接：
- ✅ 正确：
<link rel="preconnect" href="https://cdn1.example.com" crossorigin><link rel="preconnect" href="https://cdn2.example.com" crossorigin> - ❌ 错误：
<link rel="preconnect" href="https://cdn.example.com" crossorigin>（不存在这个泛域名，或指向不同物理节点） - ⚠️ 注意：Chrome 最多只保留 6 个不同源的
preconnect，加第 7 个时，最早的那个会被丢弃——所以优先保首屏强依赖的 2～3 个 CDN 域名
为什么 DevTools Network 里看不到预连接记录
这是最常被卡住的地方。看不到记录 ≠ 标签没生效，而是你踩中了静默失败条件：
-
href缺协议（cdn1.example.com→ 被当成本地路径） -
href协议不匹配（页面是 HTTPS，却写http://cdn1.example.com） -
preconnect放在或靠后（浏览器直接忽略） - 对应域名后续没发出任何请求（比如 JS 逻辑被跳过、CSS 被禁用、资源 URL 拼错）
验证方法：打开 Chrome DevTools → Network → 右键表头勾选 “Connection ID”，然后刷新页面；若看到某条请求的 Connection ID 与之前某次 preconnect 的 ID 相同，说明复用成功。
真正难的不是加几行标签，而是判断哪个 CDN 域名在哪个时刻被哪段代码触发、是否带凭据、是否已被其他优化覆盖——这些细节一旦漏掉，preconnect 就从加速器变成无效开销。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
