preconnect 必须写在 head 中 meta charset 之后、首个样式或脚本标签之前，且 href 仅限协议+域名，crossorigin 必须正确书写为空属性，否则预连接无效。
preconnect 必须写在 最顶部才生效
浏览器是流式解析 HTML 的，rel="preconnect" 只有在第一个 <link rel="stylesheet"> 或 <script> 之前出现，才可能触发连接预热。晚一行，就大概率被跳过。
常见错误：
- 把
<link rel="preconnect">放在<meta charset>前面（HTML 解析会失败） - 放在
<link rel="preload">后面（此时资源加载阶段已启动） - 动态插入：
document.head.appendChild()完全无效
正确顺序示例：
<head> <meta charset="utf-8"> <link rel="preconnect" href="https://api.example.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="/main.css"> </head>
crossorigin 属性不是可选，而是复用开关
漏写或写错 crossorigin，会导致预建的 TLS 连接无法被后续 fetch() 或字体请求复用——浏览器把带和不带 crossorigin 的连接视为两个完全隔离的池子。
立即学习“前端免费学习笔记（深入）”；
必须写对：
- ✅ 正确：
crossorigin（空属性值，等价于crossorigin="anonymous"） - ❌ 错误：
crossorigin=""（HTML 规范不认，整条<link>被忽略） - ❌ 错误：
crossorigin="anonymous"（带等号，部分解析器降级或报错）
是否需要加，取决于真实请求是否走 CORS：
- Google Fonts、API 接口返回
Access-Control-Allow-Origin→ 必须加 - 纯静态 JS/CSS CDN（如
https://cdn.jsdelivr.net），且没传credentials: 'include'→ 可不加，但加了更稳妥 - 若
fetch()显式用了credentials: 'include'，服务端必须返回Access-Control-Allow-Credentials: true，此时仍要保留crossorigin，但不能依赖anonymous模式
href 只能是协议 + 域名，不能带路径或参数
rel="preconnect" 的 href 不是 URL，而是连接目标。它只负责建立 TCP/TLS 连接，不加载任何资源。
写错就白写：
- ✅ 正确：
https://api.example.com、https://fonts.gstatic.com - ❌ 错误：
http://api.example.com（Chrome 直接忽略 HTTP） - ❌ 错误：
//cdn.example.com（协议相对路径，部分浏览器不识别） - ❌ 错误：
https://cdn.example.com/js/app.js（带路径，整个href被丢弃） - ❌ 错误：
https://api.example.com?token=123（含查询参数，同样失效）
同源地址（如 https://your-site.com）也不用加——浏览器自动复用连接，加了反而挤占并发名额。
别贪多，Chrome 实际上限是 6 个并发 preconnect
即使你写了 10 个 <link rel="preconnect">，Chrome 也只并发处理前 6 个，超出的会被排队甚至丢弃。每个连接还占用 DNS 缓存槽位和 TLS 会话票证内存。
优先级要清晰：
- 只给「首屏 1 秒内必发 HTTPS 请求」的域名加：比如
https://fonts.googleapis.com、https://fonts.gstatic.com、https://api.example.com - 子域名要单独声明：
a.example.com和b.example.com不共享连接，但各自占一个名额 - 广告、客服、分享类 SDK 域名别加——它们触发时间不确定，加了反而拖慢主资源
验证是否真起作用，得看 Chrome DevTools Network 面板：过滤 Initiator 是 preconnect，再找对应域名的资源，展开 Timing，确认 Connection Start 时间明显早于 Request Start。
真正容易被忽略的，不是“要不要加”，而是“加了之后，真实请求是否精准匹配了预连时的凭据模式、协议和域名粒度”。一个写错的 crossorigin，或者晚半秒发起的 fetch()，会让整个预连接白跑一趟，还可能挤占本可用于主域的连接资源。
