preconnect必须写在最顶部才起作用，浏览器流式解析html，仅在遇到第一个、或前识别并触发预连接，否则被忽略。
preconnect 必须写在 head 最顶部才起作用
浏览器是流式解析 HTML 的，rel="preconnect" 只有在解析到它时才会立即触发连接准备。一旦遇到第一个 <link rel="stylesheet">、<script></script> 或 <link rel="preload">，预连接窗口就关闭了。
常见错误包括： 里插入、JS 动态 append、或放在 <meta charset> 后但被其他资源标签挡住。这些都会导致 preconnect 被忽略，Network 面板里根本看不到对应连接记录。
- ✅ 正确位置：
<link rel="preconnect" href="https://fonts.googleapis.com">（越靠前越好，建议紧接<title></title>后） - ❌ 无效写法：
document.head.appendChild(...)、<link rel="preconnect"> - ⚠️ 同一域名多次声明，浏览器只执行第一次，其余静默丢弃
href 必须是完整协议 + 域名，不能带路径或参数
href 不是 URL，而是“连接目标”。它只负责建连，不加载资源。任何路径、查询参数或片段都会让预连接失败。
Chrome 对 HTTP 域名直接忽略；缺协议会被当成相对路径处理；带斜杠结尾或路径则无法匹配后续真实请求的 origin，导致连接白建。
- ✅ 正确：
https://fonts.gstatic.com、https://api.example.com - ❌ 错误：
http://fonts.googleapis.com（协议不安全）、cdn.example.com（缺协议）、https://cdn.example.com/js/main.js（含路径）、https://fonts.googleapis.com/css2?family=...（带查询参数）
crossorigin 属性不是可选，是复用连接的关键开关
是否加 crossorigin，决定了浏览器内部用哪个连接池——带和不带 crossorigin 的连接完全隔离。漏写或写错，会导致预建连接无法被后续 fetch / font 加载复用。
字体服务（如 fonts.googleapis.com、fonts.gstatic.com）和服务端返回 Access-Control-Allow-Origin: * 的 API，必须加 crossorigin（空属性值，等价于 crossorigin="anonymous"）。
- ✅ 正确：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - ❌ 错误：
crossorigin=""（HTML 规范不认）、crossorigin="anonymous"（部分解析器降级）、<link rel="preconnect" href="https://fonts.gstatic.com">（漏掉属性） - ⚠️ 如果你的
fetch()显式传了credentials: 'include'，服务端必须返回Access-Control-Allow-Credentials: true，此时仍需保留crossorigin，但需确认 CORS 配置匹配
验证 preconnect 是否真正生效，不能只看 HTML 有没有写
本地开发环境因代理或自签名证书，preconnect 往往不生效。必须在真实 HTTPS 环境下验证。
打开 Chrome DevTools → Network 面板 → 过滤目标域名 → 点开某个资源的 Timing 标签页，重点看 “Connection Start” 时间是否明显早于 “Request Start”。更直接的方式是右键表头勾选 Connection ID 和 Protocol，确认该域名下多个资源复用了同一个 Connection ID。
- ✅ 有效信号：Timing 中 “Connection Start” 提前 200–600ms；Initiator 列出现
preconnect；Connection ID 一致 - ❌ 失效信号：
preconnect条目显示queued超过 500ms；后续请求仍显示 connect 耗时 > 200ms；Network 中搜不到对应 Connection ID - ⚠️ 注意：Chrome 默认最多并发 6 个 preconnect，超出的会被静默丢弃。别为 a.example.com 和 b.example.com 都加——除非它们真各自建连，否则优先 preconnect 根域名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
