rel="preconnect"能实打实减少第三方api的ttfb 200–600ms，但仅对https域名生效，且必须同时满足四个硬性条件：带正确crossorigin属性、置于最顶部、js在1秒内发起请求、服务端返回cors头。

rel="preconnect" 能实打实减少第三方 API 的 TTFB（首字节时间），但不是加了就生效——它只对 HTTPS 域名有效，且必须满足四个硬性条件，缺一不可。

为什么 rel="preconnect" 对第三方 API 有用

浏览器发起一个 HTTPS 请求前，要走 DNS 查询 → TCP 握手 → TLS 协商三步，加起来在弱网或移动端常耗时 300–600ms。rel="preconnect" 提前把这三步干完，等 JS 真调用 fetch() 时，直接发 HTTP 请求就行。实测对 https://api.example.com 这类首屏同步请求的 API，TTFB 可降 200–600ms。

rel="preconnect" 必须带 crossorigin 属性

漏写或写错 crossorigin，连接建了也白建——浏览器会把带凭据和不带凭据的连接池完全隔离。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• ✅ 正确写法：<link rel="preconnect" href="https://api.example.com" crossorigin>（空属性值，等价于 crossorigin="anonymous"）
• ❌ 错误写法：crossorigin=""（HTML 解析器忽略）、crossorigin="anonymous"（部分旧解析器报错或降级）
• ⚠️ 特殊情况：若你的 fetch() 显式传了 credentials: 'include'，服务端必须返回 Access-Control-Allow-Credentials: true，此时仍要用 crossorigin，但需确认 CORS 配置匹配

必须放在 最顶部，且早于所有资源声明

浏览器是流式解析 HTML 的，rel="preconnect" 必须出现在第一个 <link rel="stylesheet">、<script></script> 或 <link rel="preload"> 之前，晚一行就可能失效。

• ✅ 正确位置示例：
  
  <link rel="preconnect" href="https://api.example.com" crossorigin>
<link rel="stylesheet" href="main.css">
  
• ❌ 放在 <meta> 后面但 <title></title> 前？不行——<title></title> 不影响解析流，但任何 <link> 或 <script></script> 出现即触发阻塞

连接复用有严格时效窗口，JS 必须尽快发起请求

预连接不是永久保持的。Chrome 默认在建连后约 1 秒内未被复用，就会回收；Safari 更短。如果 fetch() 在 preconnect 后 2 秒才执行，基本等于没连。

• 适用场景：React.useEffect(() => { fetch(...) }, [])、Vue onMounted(() => fetch(...))、或初始化时同步 fetch
• 不适用场景：用户点击按钮后才调用的 API、滚动到某区域才触发的请求、带延迟的定时器 fetch
• 验证方式：DevTools Network 面板里看该 API 请求的 Connection ID 是否复用已存在的连接（而非新建）

真正起效的关键不在“有没有写”，而在是否同时满足：HTTPS + 正确 crossorigin + 顶部位置 + JS 在 1 秒内发起请求。少一个，就只是多发了一个无意义的空连接。

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！