preconnect适用于明确将高频加载的跨域关键资源（如google fonts、cdn js/css、首屏api），需写在靠前位置且仅含https域名；dns-prefetch仅做dns解析，适合低频或不确定是否访问的第三方域名。
preconnect 能显著减少第三方资源的连接延迟，但只对跨域域名有效，且必须写在 里、配对 crossorigin 才能真正起效。
什么时候该用 preconnect 而不是 dns-prefetch
你看到字体加载慢、CDN 图片卡顿、API 请求首字节（TTFB）偏高，且这些资源来自不同域名（比如 https://fonts.googleapis.com 或 https://cdn.example.com），就该用 preconnect。
它比 dns-prefetch 多做了 TCP 握手和 TLS 协商，省下的时间更实在——尤其在移动端或弱网下，可减少 200–600ms 连接等待。
- 如果目标域名是 HTTPS，且资源带 CORS（比如字体、fetch API），
preconnect必须加crossorigin，否则浏览器会重建连接 - 如果只是想兼容老浏览器（如 IE 或旧版 Safari），可以额外加一行
dns-prefetch作为降级，但不要只用它替代preconnect - 同源域名（比如你自己的
https://your-site.com）完全不需要preconnect，浏览器已自动复用连接
preconnect 标签必须写在哪、怎么写才不白加
它必须出现在 的靠前位置，最好在所有 CSS 和 JS 引入之前。浏览器解析到就立刻开始建连，晚了就错过最佳时机。
错误写法：<link rel="preconnect" href="http://cdn.example.com">（HTTP 协议，现代浏览器可能忽略）
正确写法示例：
<link rel="preconnect" href="https://cdn.example.com" crossorigin><link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="preconnect" href="https://api.example.com">
- HTTPS 域名 +
crossorigin：适用于字体、图片、fetch 请求等需 CORS 的场景 - HTTPS 域名不加
crossorigin：仅用于纯资源请求（如静态 JS/CSS），但多数 CDN 实际仍走匿名请求，建议统一加上更稳妥 - 绝对不能写 HTTP 域名；也不能写路径（如
https://cdn.example.com/fonts/），href只接受 origin 级别
滥用 preconnect 会带来什么实际问题
每个 preconnect 都会占用一个 TCP 连接槽位，而浏览器对同一域名的并发连接数有限（通常 6 个）。你多加一个，就可能挤掉主站关键资源的下载机会。
- Chrome DevTools → Network 面板里看到大量
other类型请求，但后续没对应资源加载 → 白建连，连接超时关闭 - 页面加载变慢、首屏渲染延迟，尤其是滚动后图片才陆续出现 → 很可能是 preconnect 抢占了带宽
- 多个第三方域名都 preconnect，但其中只有 1–2 个真被用到 → 建议删掉未使用的，只保留字体、CDN、核心 API 这三类
- 动态插入（如 JS 创建
link标签）基本无效：preconnect 必须由 HTML 解析器早期触发，运行时插入不会触发连接准备
怎么验证 preconnect 是否真的生效
打开 Chrome DevTools → Network 面板，过滤 Other 类型，找 Initiator 列显示为 parser 的条目，再看 Protocol 是否为 h2 或 h3，Time 是否明显短于后续同域名资源的 TTFB。
- 如果看到
net::ERR_CONNECTION_REFUSED或Failed to parse→ 检查href域名拼写、协议是否 HTTPS、服务是否在线 - 如果某域名 preconnect 成功，但后续资源仍走“DNS Lookup → Connecting → TLS”完整流程 → 很可能是没加
crossorigin，导致浏览器弃用已建连接 - 对比开启/关闭 preconnect 后的 Waterfall 图中首个第三方资源的 “Queueing” 和 “Connecting” 时间差，能直观看出收益
最常被忽略的一点：preconnect 不解决资源体积大、服务器响应慢、或未启用 HTTP/2 这些底层问题，它只管“连接快”，不管“内容快”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
