preconnect必须写在最顶部才生效，浏览器流式解析html，遇首个、或即关闭预连接窗口；href须为完整https协议+根域名，如https://fonts.gstatic.com；crossorigin属性必加且只能为空值，如crossorigin；超6个会触发浏览器并发限制，建议控制在3–4个首屏强依赖域名。
preconnect 必须写在 最顶部才生效
浏览器是流式解析 HTML 的，rel="preconnect" 只有在解析到它时才会触发预连接。一旦遇到第一个 <link rel="stylesheet">、<script></script> 或 <link rel="preload">，空闲连接窗口就关闭了。
常见失效写法包括：
-
<link rel="stylesheet" href="main.css"> <link rel="preconnect" href="https://cdn.example.com">—— 样式表先出现，preconnect 被忽略 - 动态插入：
document.head.appendChild(document.createElement('link'))—— 完全不触发 - 放在
里 —— 浏览器根本不处理
正确做法：紧接 <meta charset> 或 <title></title> 后立即写，顺序无关功能，但越早越好。
href 值必须是完整 HTTPS 协议 + 根域名
href 不是 URL，而是连接目标标识。它只负责建连，不加载资源，因此任何路径、参数、端口或协议相对写法都会导致预连接失败。
有效与无效对比：
- ✅
https://fonts.gstatic.com—— 正确：协议明确、无路径 - ❌
//fonts.gstatic.com—— 协议相对地址，被降级为dns-prefetch，不是 preconnect - ❌
https://fonts.gstatic.com/css—— 带路径，整个标签被浏览器忽略 - ❌
http://api.example.com—— HTTP 域名在 Chrome/Firefox 中直接被无视 - ❌
cdn.example.com—— 缺协议，被当作相对路径处理
注意：同源地址（如 https://your-site.com）加了也无效，浏览器跳过，不浪费连接槽位。
crossorigin 属性不是可选，是复用开关
是否加 crossorigin，决定了预建的 TLS 连接能否被后续请求复用。浏览器把带和不带 crossorigin 的连接视为两个隔离池 —— 漏写或写错，等于白建。
关键规则：
- ✅ 正确写法：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>（空属性值） - ❌ 错误写法：
crossorigin=""（HTML 规范不认，被忽略） - ❌ 错误写法：
crossorigin="anonymous"（带等号，部分解析器降级或报错） - 字体服务（
fonts.googleapis.com/fonts.gstatic.com）、fetch 请求的 API 域名、需credentials: 'include'的资源，必须加crossorigin - 纯静态脚本（
<script src="https://cdn.example.com/app.js"></script>）可不加，但页面里只要存在 fetch + CORS，就得统一加
如果服务端返回 Access-Control-Allow-Origin: *，而你没加 crossorigin，真实请求仍会重走 TLS 握手。
别超 6 个，优先保首屏强依赖域名
每个 rel="preconnect" 占用一个浏览器空闲 TCP 连接槽位，Chrome 默认上限为 6 个并发预连接。加太多不仅无效，还会挤占主站资源下载通道，拖慢首屏。
实操建议：
- 最多保留 3–4 个，典型组合：
https://fonts.googleapis.com、https://fonts.gstatic.com、https://cdn.example.com、https://api.example.com - 不要为多个子域重复声明（如
a.cdn.example.com和b.cdn.example.com），除非它们 DNS 不同、后端独立；优先 preconnect 根域名cdn.example.com - 避免 preconnect 到重定向目标（如
api.v1.example.com→ 301 →api.v2.example.com），预连白做 - 用户行为触发的域名（如埋点上报、分享 SDK）更适合
rel="dns-prefetch"，而非 preconnect
验证是否生效，不能只看代码有没有写，得进 Chrome DevTools → Network 面板，观察目标域名的 initial connection 时间是否提前，且 Connection ID 是否复用 —— 这才是唯一可靠依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
