preconnect 仅对几秒内必发的跨域 HTTPS 请求有效，须置于 head 最顶部、带完整协议域名、按 CORS 需求设 crossorigin，数量不超过 6 个且仅限首屏强依赖域名。
只有确定几秒内必从某第三方域名发起 HTTPS 请求时，rel="preconnect" 才真能省时间；加错位置、漏掉 crossorigin、或对同源/HTTP 域名使用，它就完全不生效。
preconnect 必须写在 <head> 最顶部才起作用
浏览器只在解析 <head> 的流式过程中处理 preconnect，晚于第一个 <link rel="stylesheet"> 或 <script> 就可能错过连接窗口。放 <body> 里、JS 动态插入、或在 <link rel="preload"> 后面，都会被忽略。
- ✅ 正确位置：
<head><link rel="preconnect" href="https://fonts.googleapis.com"></head> - ❌ 无效位置：
<body><link rel="preconnect" ...></body>、<script>document.head.appendChild(...)</script> - ⚠️ 注意：同一域名多次声明，浏览器只执行第一次，其余丢弃
href 值必须是完整协议 + 域名，不能带路径或参数
href 不是 URL，而是“连接目标”，只负责建连，不加载资源。带路径（如 https://cdn.example.com/fonts.css）或查询参数会导致预连接失败，Network 面板里看不到对应记录。
- ✅ 正确：
https://fonts.gstatic.com、https://api.example.com - ❌ 错误：
http://fonts.googleapis.com（Chrome 直接忽略 HTTP）、cdn.example.com（缺协议，被当相对路径）、https://cdn.example.com/js/（带路径） - ⚠️ 同源地址（如
https://your-site.com）加了也无效，浏览器直接跳过
crossorigin 属性不是可选，是行为开关
是否加 crossorigin，取决于你后续真实请求是否需要 CORS 权限。不匹配会导致预建的 TLS 连接被丢弃，真实请求仍要重连。
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须加：
https://fonts.googleapis.com、https://fonts.gstatic.com（字体文件返回Access-Control-Allow-Origin: *）、API 域名且 JS 用fetch()调用并服务端配了 CORS - ✅ 可不加：纯静态 CDN（如
https://cdn.jsdelivr.net），且你没显式传credentials: 'include' - ❌ 错误写法：
crossorigin=""或crossorigin="anonymous"—— HTML 规范只接受空属性值，带等号会被解析失败或忽略
别超 6 个，优先保首屏强依赖的第三方域名
每个 preconnect 占一个空闲 TCP 连接槽位，而现代浏览器对单域名并发连接数上限通常为 6。加太多会挤占主站资源下载通道，反而拖慢首屏。
- ✅ 推荐范围：3–4 个，最多不超过 6 个
- ✅ 典型组合：
https://fonts.googleapis.com+https://fonts.gstatic.com（Google Fonts 必须成对）、CDN 域名（https://cdn.example.com）、首屏 API（https://api.example.com） - ❌ 避免：广告、统计、分享按钮等非首屏必需域名；多个子域名（
a.example.com和b.example.com）无法共享连接，还容易超限
最容易被忽略的一点是：它只对「真实发生了的跨域 HTTPS 请求」复用连接。如果 JS 里根本没调用那个 API，或者 CSS 里没引用那个 CDN 上的字体，预连接就是白建——既不报错，也不警告，只悄悄浪费一个连接名额。
