preconnect 是提前建立 tcp 连接并完成 tls 握手的资源提示，而 dns-prefetch 仅做 dns 查询；preconnect 需用 ，不可带路径或协议省略，适用于确定加载的跨域关键资源，不适用于懒加载或低频域名。
preconnect 是什么，跟 DNS 预解析有啥区别
preconnect 不只是提前查 DNS。它会建立到目标域名的 TCP 连接，甚至完成 TLS 握手（对 HTTPS）。而 dns-prefetch 只做 DNS 查询。如果你确定要加载某个第三方资源（比如 CDN 上的字体、JS 或 API），preconnect 效果更直接。
但别乱加：每个 preconnect 都占一个浏览器空闲连接槽位，Chrome 最多维持 6 个并发连接。连多了反而挤占真实请求。
Link 标签里怎么写 preconnect 才生效
必须用 <link rel="preconnect">，且 href 值只写协议 + 域名，不能带路径或查询参数：
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://cdn.example.com">
常见错误：
- 写了
https://cdn.example.com/static/js/app.js→ 路径多余，浏览器会忽略 - 漏了协议（如
//cdn.example.com）→ 大部分浏览器不支持，尤其 Safari - 用了
rel="prefetch"或rel="preload"替代 → 完全不是一回事，不会触发连接建立
什么时候该用 preconnect，什么时候不该用
适合场景：
- 已知页面一定会请求的跨域资源（如 Google Fonts、CDN JS、埋点 SDK）
- 首屏关键链路上的第三方 API 域名（比如
https://api.example.com） - 你控制得了该域名，且它支持 HTTP/2 或 HTTP/3（否则复用连接收益低）
不该用的场景：
- 用户行为触发的懒加载资源（比如点击后才发的请求）→ 改用
fetch()+keepalive或按需preconnect - 同一域名下资源极少，或只用一次 → 连接开销可能大于收益
- 目标域名不支持 HTTPS，或证书经常失效 →
preconnect会在后台静默失败，还浪费连接
兼容性与 fallback 方案怎么处理
preconnect 在 Chrome、Edge、Firefox、Safari 14+ 都支持。Safari 13 及更早版本会直接忽略该 rel 值，无副作用。
不需要显式 fallback，但要注意：
- 别和
dns-prefetch一起写同一个域名 → 浏览器优先执行preconnect，后者被跳过，白写 - 如果必须兼容老 Safari（，它会被新浏览器忽略，老浏览器能用上
- 不要指望它解决 TTFB 高的问题：如果后端响应慢、路由绕路或 CDN 缓存未命中，
preconnect帮不上忙
真正容易被忽略的是：预连接不等于预加载。连上了不代表资源就下来了，后续仍需正常 <script src></script> 或 fetch() 触发请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
