rel="preconnect"仅对首屏1秒内必用、HTTPS协议、服务端返回CORS头的跨域域名有效，可减少200–600ms TTFB；须置于<head>最顶部、带crossorigin属性，且数量控制在3–4个以内。
加 rel="preconnect" 不是为了“提前做点什么”，而是为了在首屏 JS 立即发起 HTTPS 跨域请求前，把 DNS + TCP + TLS 三步干完——只对 1 秒内必用的域名有效，其余全是干扰。
哪些域名加了真省时间
只有满足「HTTPS + 首屏立即请求 + CORS 响应头存在」三个条件的域名才值得加。常见有效目标：
-
https://api.example.com—— React/Vue 初始化时useEffect(() => { fetch() }, [])就调用 -
https://auth.example.com—— 页面加载后同步校验登录态，fetch()在<script>内直接执行 -
https://fonts.gstatic.com—— 字体资源强制跨域，不加crossorigin就无法复用连接 -
https://cdn.jsdelivr.net—— 公共 CDN，域名稳定、无负载跳转、服务端返回Access-Control-Allow-Origin: *
以下情况加了也白加：
-
http://api.example.com—— Chrome 直接忽略 -
https://your-site.com/api—— 同源，浏览器自动复用连接 -
https://analytics.example.com—— 用户点击或滚动后才上报，不属于首屏强依赖 -
https://cdn-01.example.com和https://cdn-02.example.com动态切换 ——preconnect只能绑定一个 IP，另一个必然失效
crossorigin 属性不是可选，是复用开关
漏写或写错 crossorigin，预连接就建了也白建——浏览器把“带凭据”和“无凭据”的连接池完全隔离，真实 fetch() 仍要重连。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<link rel="preconnect" href="https://api.example.com" crossorigin>（空属性值，等价于crossorigin="anonymous"） - ❌ 错误写法：
crossorigin=""（HTML 规范不认，整条标签被忽略） - ⚠️ 若
fetch()显式传了credentials: 'include'，服务端必须返回Access-Control-Allow-Credentials: true，此时仍需保留crossorigin，但不能依赖anonymous模式
位置比数量更重要，晚一行就失效
浏览器是流式解析 HTML 的，rel="preconnect" 必须出现在 <head> 最顶部，且早于第一个 <link rel="stylesheet">、<script> 或 <link rel="preload">。
- ✅ 有效顺序：
<head><link rel="preconnect" href="https://api.example.com" crossorigin><link rel="stylesheet" href="/main.css"></head> - ❌ 无效位置：放在
<meta>后但<title>前？不行；写在<body>里？浏览器直接忽略；动态插入（document.head.appendChild()）？完全不生效 - ⚠️ Chrome 并发上限为 6 个，再多的
rel="preconnect"会被排队甚至丢弃，建议控制在 3–4 个以内，只留给真正首屏立即用的域名
怎么验证它是不是真起作用
别只看代码写了没，得进 Chrome DevTools Network 面板确认连接是否被复用：
- 右键表头勾选
Connection ID和Protocol - 找到你的 API 请求（如
https://api.example.com/v1/user），看它的Connection ID是否和上方preconnect条目一致 - Timing 标签页中，
Connect时间应压缩到接近 0ms；若仍显示 >200ms，说明没复用成功 - 注意：本地开发环境因代理或自签名证书，
preconnect往往不生效，务必在真实 HTTPS 环境下测试
最常被忽略的一点：预连接不是永久保持的——Chrome 默认在建连后约 1 秒内未被复用就会回收，所以 JS 发起 fetch() 的时机，比你加了几条 preconnect 更关键。
