rel="preconnect"对首屏立即fetch的HTTPS第三方API或CDN域名可减少200–600ms TTFB，前提是置于<head>顶部、带crossorigin属性、服务端返回CORS头且请求在1秒内发起。
rel="preconnect"到底能省多少时间
对首屏立即 fetch 的 HTTPS 第三方 API 或 CDN 域名，rel="preconnect" 能实打实减少 200–600ms 的 TTFB（首字节时间），但前提是它真被浏览器复用了。这个收益集中在弱网、高延迟地区或移动端更明显；在本地开发环境或高速光纤下几乎测不出来。
关键不是“有没有连”，而是“连完能不能用上”：如果 JS 在 preconnect 后 2 秒才发请求，连接可能已被浏览器回收；如果服务端没返回 Access-Control-Allow-Origin，加了也白加。
- 典型有效场景：
https://fonts.googleapis.com（字体 CSS）、https://cdn.example.com（首屏 JS/CSS）、https://api.example.com（React/Vue 初始化时同步 fetch） - 无效场景：
http://域名（Chrome 直接忽略）、https://your-site.com（同源自动复用）、https://analytics.example.com（用户点击后才上报） - 收益上限：单域名最多省掉 DNS + TCP + TLS 三步，理论极限约 600ms；再多写几个
rel="preconnect"不会叠加提速，反而挤占浏览器并发连接数（通常限 6 个/域名）
crossorigin 属性为什么必须写、怎么写才对
crossorigin 不是可选项，是行为开关。漏写、写错值，会导致预连接建了也白建——浏览器内部把带和不带 crossorigin 的连接视为两个完全隔离的连接池。
真实 fetch 请求走的是带凭据（credentials: 'include'）还是无凭据（credentials: 'omit'）模式，决定了它能否复用 preconnect 建好的连接。而这个模式由你声明的 crossorigin 属性决定：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<link rel="preconnect" href="https://api.example.com" crossorigin>（空属性值，等价于crossorigin="anonymous"） - ❌ 错误写法：
crossorigin=""（HTML 规范不认这个语法，会被忽略）、crossorigin="anonymous"（带等号，部分解析器报错或降级为 no-cors） - ⚠️ 特殊情况：如果你的
fetch()显式传了credentials: 'include'，服务端必须返回Access-Control-Allow-Credentials: true，此时仍要保留crossorigin属性，但不能依赖anonymous模式——得确认服务端 CORS 配置匹配
放在 HTML 里什么位置才算生效
rel="preconnect" 必须出现在 <head> 最顶部，且要在第一个 <link rel="stylesheet">、<script> 或 <link rel="preload"> 之前。晚一行，就可能失效。
原因：浏览器是流式解析 HTML 的。只有在解析器刚进入 <head>、还没开始下载任何外部资源时，它才有空闲连接窗口去执行 preconnect。一旦解析到一个 src 或 href，加载流程就启动了，后续的 preconnect 提示会被丢弃。
- ✅ 有效位置：
<head><link rel="preconnect" href="https://cdn.example.com" crossorigin><link rel="stylesheet" href="/main.css"></head> - ❌ 无效位置：
<head><link rel="stylesheet" href="/main.css"><link rel="preconnect" href="https://cdn.example.com" crossorigin></head> - ? 完全无效：
document.head.appendChild()动态插入、<body>里写、模板字符串中拼接后注入
怎么验证 preconnect 真的起作用了
别只看代码写了没。打开 Chrome DevTools → Network 面板 → 切换到 Timing 标签页，找一个来自目标域名的资源（比如 font.woff2 或 app.js），展开它的 Timing，重点看两点：
- “Connection Start” 时间是否明显早于 “Request Start”（至少提前 100ms 以上）
- Initiator 列是否显示为
preconnect（不是parser或script） - 该资源的 Priority 是否为
Highest或High（说明连接已就绪并被复用）
更直接的方式：在 Network 面板过滤 Initiator: preconnect，确认有对应请求；再过滤目标域名（如 cdn.example.com），看其他资源是否复用了这条连接。如果只看到 preconnect 请求，但后续资源仍是 Initial connection，基本可以断定 crossorigin 写错了，或者服务端 CORS 头缺失。
容易被忽略的一点：同一域名多次声明 rel="preconnect"，浏览器只执行第一次，其余全部丢弃——检查你的模板、组件、构建产物里有没有重复注入。
