rel="preconnect"仅对首屏立即fetch且服务端返回cors头的https第三方api域名有效，如https://api.example.com、https://auth.example.com、https://search.example.com；须置于最顶部、带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></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() 时仍要重连。
- ✅ 正确写法：
<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" 必须出现在第一个 <link rel="stylesheet"> 或 <script></script> 之前。否则，解析器已进入资源加载阶段，空闲连接窗口就关闭了。
- ✅ 有效位置：
<link rel="preconnect" href="https://api.example.com" crossorigin> <link rel="stylesheet" href="/main.css"> - ❌ 无效位置：
<link rel="stylesheet" href="/main.css"> <link rel="preconnect" href="https://api.example.com"> - ⚠️ 动态插入（如
document.head.appendChild()）完全不生效；里写也无效
别贪多，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 的握手延迟。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
