预连接仅在确定几秒内必发多个跨域请求时使用，需放中、用完整协议+域名、不可动态插入；同域无需添加，旧版safari不支持，滥用会挤占连接池并触发tls错误。
link rel=”preconnect” 什么时候该用
预连接只在跨域请求明显存在时才值得加，比如页面里大量用到了 https://cdn.example.com 的图片、字体或 js，而它和当前站点域名不同。同域请求完全不需要——浏览器自己会复用连接，加了反而多一次 DNS+TLS 开销。
- 典型场景：第三方 CDN、分析脚本（
analytics.js）、字体服务（fonts.googleapis.com） - 如果只是偶尔加载一个跨域资源，预连接收益几乎为零，还可能抢占连接池
- chrome 支持最早从 v63 开始，Safari 14.1+ 才支持
preconnect，旧版 Safari 会直接忽略，不报错也不生效
preconnect 和 dns-prefetch 的区别在哪
dns-prefetch 只做 DNS 查询，preconnect 会走完整 TCP + TLS 握手（如果启用了 https）。后者更快，但也更重——它会真实建立连接，占用浏览器并发连接数（通常上限是 6 个/域名）。
- 用
<link rel="dns-prefetch" href="https://api.example.com">适合你只确定要查 DNS，但不确定是否真会发请求（比如用户操作后才触发） - 用
<link rel="preconnect" href="https://cdn.example.com">适合你**确定接下来几秒内必发请求**，且该域名有多个资源要加载 - 别对未启用 HTTPS 的域名用
preconnect，Chrome 会拒绝握手；HTTP/2 或 HTTP/3 下效果更明显，但协议本身不影响预连接是否生效
写 preconnect 标签的三个硬性要求
漏掉任意一条，标签就等于没写，浏览器不会执行预连接。
- 必须放在
里，且越靠前越好（最好在<meta charset>后立即写） - href 值必须是**完整协议+域名**，不能带路径，例如
https://fonts.gstatic.com✅，//fonts.gstatic.com❌（协议相对地址不被支持），https://fonts.gstatic.com/css❌（带路径会被截断，但不如直接写错） - 不能用 JavaScript 动态插入 ——
document.head.appendChild()添加的preconnect标签，浏览器一律无视
容易被忽略的副作用：连接池挤占和 TLS 证书检查
浏览器对每个域名的并发预连接数有限制（通常是 2–4 个），写太多 preconnect 标签，会导致真实资源请求排队等待空闲连接，反而拖慢首屏。
立即学习“前端免费学习笔记（深入）”；
- 同一域名写多个
preconnect标签，只有第一个生效，后面重复的被丢弃 - 如果目标域名 TLS 证书异常（过期、域名不匹配），Chrome 会在控制台抛出
net::ERR_CERT_COMMON_NAME_INVALID类错误，且该预连接失败后不会自动重试 - 移动端尤其敏感：弱网下预连接耗时可能超过 1s，而真实资源还没开始加载，此时不如让浏览器按需建连
实际部署时，先用 chrome devtools 的 Network → Timing 面板确认哪些跨域域名确实是瓶颈，再针对性加 preconnect；别凭感觉堆标签。