preconnect 标签需置于 <head> 最顶部、协议+域名格式正确、添加 crossorigin 属性、不超过6个且仅对后续真实跨域 HTTPS 请求生效，否则无效。
preconnect 标签只有写对位置、写对格式、写对域名，浏览器才会真正发起 DNS + TCP + TLS 连接；写错一行，等于没写。
preconnect 必须放在 <head> 最顶部才生效
浏览器解析 HTML 是流式的，preconnect 必须在遇到第一个外部资源（比如 <link rel="stylesheet"> 或 <script>）之前就被看到，否则连接来不及建好。它不是“声明了就管用”，而是“被解析器看见那一刻就触发”。
- 正确位置：紧接
<meta charset="utf-8">后，早于所有 CSS/JS 引入 - 错误位置：
<body>里、<link rel="preload">后、注释之后、或 JS 动态插入（document.head.appendChild()完全无效） - Chrome DevTools 的 Network → Timing 面板里，如果目标域名的资源“Connection Start”时间没提前，大概率是放晚了
href 值必须是协议 + 域名，不能带路径或参数
href 不是 URL，而是连接目标标识符。浏览器只取协议和域名部分做连接准备，其余一律截断或忽略——哪怕你写了 https://fonts.googleapis.com/css2?family=Roboto，实际只连 https://fonts.googleapis.com，但更糟的是：这种写法会直接让标签失效。
- 合法：
https://fonts.gstatic.com、https://cdn.example.com、https://api.example.com - 非法：
https://fonts.googleapis.com/css（含路径）、https://cdn.example.com/?v=1（含查询参数）、//fonts.gstatic.com（协议相对地址） - HTTP 域名（如
http://cdn.example.com）在现代 Chrome 中不会触发任何连接行为
crossorigin 属性不是可选，而是复用前提
不加 crossorigin，浏览器会以“无凭据模式”建连；而字体、fetch() 带 credentials: 'include' 的请求，需要的是“带凭据连接”。两者不兼容，预连白建。
立即学习“前端免费学习笔记（深入）”；
- 必须加：
https://fonts.googleapis.com、https://fonts.gstatic.com（字体强制 CORS）、API 域名且服务端返回Access-Control-Allow-Origin - 写法只能是
crossorigin或crossorigin="anonymous"；crossorigin=""是非法 HTML，会被忽略 - 纯静态 JS/CSS（无 CORS header）可不加，但加了也无害；统一加上更稳妥，避免后续请求因凭据策略不匹配而重连
别超 6 个，优先首屏强依赖域名
Chrome 硬性限制最多同时进行 6 个 preconnect，再多的标签会被排队甚至丢弃。每个连接还占用 DNS 缓存槽位和 TLS 会话票证内存。
- 优先级排序：首屏必现资源（如 Google Fonts 成对域名） > 首屏后 1 秒内大概率触发的资源（如首屏 API） > 其他
- 不适用场景：同源域名（
https://your-site.com加了无效）、广告/埋点/分享按钮等低确定性域名（改用dns-prefetch） - 重复声明同一域名（如两次
https://cdn.example.com）只执行第一次，后一次被丢弃
最容易被忽略的是：它只对「后续真实发生的跨域 HTTPS 请求」起作用——如果页面根本没从那个域名加载资源，或者资源被缓存、被 JS 延迟触发，preconnect 就只是空占一个连接名额。
