preconnect是标签的rel值，用于提前完成dns查询、tcp握手和tls协商，仅适用于明确几秒内必用的关键https跨域资源；必须写在顶部、带完整协议和crossorigin属性才生效。
preconnect 是什么，什么时候该用它
preconnect 是一个 <link> 标签的 rel 值，用于在浏览器解析到该标签时，提前发起 DNS 查询、TCP 握手，甚至 TLS 协商（取决于目标协议），为后续资源请求节省时间。它不下载资源，只建立连接准备。
适合用在你明确知道后续会从某个域名加载关键资源（比如字体、JS、CSS、API）的场景。例如页面首屏要加载 https://fonts.googleapis.com 的 WebFont，或调用 https://api.example.com 的初始化数据——这时提前 preconnect 能减少 1–2 个 RTT 延迟。
别乱加：每个 preconnect 都会占用浏览器有限的连接数（通常最多 6 个并发连接/域名），对非关键域名滥用反而可能挤占真实请求。
怎么写 preconnect 才有效
语法很简单，但有几个硬性要求必须满足：
- 必须是
<link rel="preconnect" href="https://example.com">形式，href必须是完整、合法的 URL（含协议），不能是相对路径或只写域名 - 必须放在
中，越靠前越好（最好在<meta charset>后立即写），否则浏览器可能来不及触发 - 目标域名必须与当前页面同源或显式允许跨域（CORS 不影响
preconnect，但后续资源加载仍受其限制） - 如果目标用 HTTPS，建议加上
crossorigin属性（即使没 CORS 资源也要加），否则 Chrome 等浏览器会降级为仅 DNS 查询，跳过 TCP/TLS 预连接
正确写法示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
错误写法示例：
<link rel="preconnect" href="//fonts.googleapis.com"><!-- 缺协议，无效 --><link rel="preconnect" href="fonts.googleapis.com"><!-- 缺协议和 //，无效 --><link rel="preconnect" href="https://fonts.googleapis.com"><!-- 缺 crossorigin，Chrome 只做 DNS -->
preconnect 和 dns-prefetch 有什么区别
两者都用来优化域名解析，但能力层级不同：
-
dns-prefetch只做 DNS 查询（即把域名转成 IP），开销最小，兼容性最好（IE10+ 支持） -
preconnect做 DNS + TCP + TLS（HTTPS 下），更激进，收益更大，但开销更高，且只被现代浏览器支持（Chrome 46+、Firefox 46+、Safari 15.4+） - 如果目标域名只用 HTTP 或你不确定是否用 HTTPS，用
dns-prefetch更稳妥；如果是明确的 HTTPS 第三方服务（如 CDN、字体、API），优先用preconnect - 不要同时写两个：浏览器遇到
preconnect会自动覆盖同域名的dns-prefetch，冗余声明无意义
容易被忽略的坑：跨域资源和证书问题
preconnect 本身不发送 Cookie 或认证头，也不受 CSP 限制，但它依赖目标服务器响应正常。几个实际踩过的坑：
- 目标域名配置了严格的 TLS 版本（如只支持 TLS 1.3），而用户浏览器较旧（TLS 1.2），
preconnect会失败并静默放弃，不会报错，但后续资源加载会回退到完整握手流程 - 如果目标域名用了自签名证书或证书链不全，Chrome 会拒绝完成 TLS 预连接（即使页面后续加载该资源时用户点了“继续访问”，
preconnect阶段已失败） - 某些 CDN（如 Cloudflare）在开启 WAF 或 Bot Management 后，会对预连接请求返回 403，导致
preconnect失效——这种情况下只能降级为dns-prefetch -
crossorigin属性不是可选的：没有它，Chrome 当前版本（120+）对 HTTPS 目标只执行 DNS 查询，相当于退化成dns-prefetch
上线前建议用 Chrome DevTools 的 Network → Timing 标签页，过滤 preconnect 请求，看 Connection Start 是否出现在资源请求之前，且 Duration 是否明显短于首次真实请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
