rel="preconnect"仅对首屏立即fetch且服务端返回CORS头的HTTPS第三方API域名有效，如https://api.example.com、https://auth.example.com、https://search.example.com；须置于<head>最顶部、带crossorigin属性、href为协议+域名，数量不超过6个。
对首屏立即调用的 HTTPS 第三方 API 域名，rel="preconnect" 能实打实地减少 200–600ms 的 TTFB（首字节时间），但前提是写对位置、配对 crossorigin，且该域名确实在 1 秒内发起请求。
哪些 API 域名适合加 rel="preconnect"
只对「页面加载后 JS 立即 fetch()」且服务端返回了 Access-Control-Allow-Origin 的 HTTPS 域名有效。常见符合场景：
-
https://api.example.com—— 首屏 React/Vue 初始化就调用的接口 -
https://auth.example.com—— 登录态校验在<script>中同步触发 -
https://search.example.com—— 首屏带默认搜索建议，JS 构造完 URL 就发请求
不适用的情况：
-
http://api.example.com—— Chrome 直接忽略 HTTP 协议 -
https://your-site.com/api—— 同源域名，浏览器自动复用连接，加了也无效 -
https://analytics.example.com—— 用户行为触发才上报，非首屏强依赖，更适合rel="dns-prefetch"
crossorigin 属性必须加，且不能写错
API 请求是否需要 CORS 权限，决定了预连接能否被复用。如果服务端响应头含 Access-Control-Allow-Origin，而你没加 crossorigin，浏览器会建一个“无凭据”的 TLS 连接，真实 fetch() 时仍要重连。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
<link rel="preconnect" href="https://api.example.com" crossorigin>或crossorigin="anonymous" - ❌ 错误写法：
crossorigin=""—— HTML 规范不认这个值，会被忽略 - ⚠️ 注意：如果前端
fetch()显式传了credentials: 'include'，则需服务端配合返回Access-Control-Allow-Credentials: true，此时crossorigin仍要保留，但不能用anonymous模式
必须放在 <head> 最顶部，晚一行都可能失效
浏览器是流式解析 HTML 的，rel="preconnect" 必须出现在第一个 <link rel="stylesheet"> 或 <script> 之前。否则，解析器已进入资源加载阶段，空闲连接窗口就关闭了。
- ✅ 有效位置：
<head><link rel="preconnect" href="https://api.example.com" crossorigin><link rel="stylesheet" href="/main.css"></head> - ❌ 无效位置：
<head><link rel="stylesheet" href="/main.css"><link rel="preconnect" href="https://api.example.com"></head> - ⚠️ 动态插入（如
document.head.appendChild()）完全不生效；<body>里写也无效
别贪多，3–6 个是安全上限
每个 preconnect 占用一个 TCP 连接槽位，Chrome 当前硬限制为 6 个并发预连接。加太多不仅没收益，还会挤占主域资源下载的连接数，尤其在 HTTP/2 多路复用下，跨域连接收益本身就在下降。
- 优先保最关键的 2–3 个：字体（
fonts.googleapis.com+fonts.gstatic.com）、核心 CDN、首屏 API - 同一域名多次声明，浏览器只执行第一次，其余丢弃
- href 值必须是协议 + 域名，不能带路径 ——
https://api.example.com/v1/users❌，只能写https://api.example.com✅
最容易被忽略的一点：它不解决服务端处理慢的问题，只省掉客户端建连时间。如果你的 API TTFB 长期 >1s，先查服务端日志和数据库查询，别指望靠 preconnect 把 1200ms 缩到 800ms —— 它最多帮你砍掉那 300ms 的握手延迟。
