preconnect能加速资源加载，它是html中用于提前建立dns+tcp+tls连接的rel提示，仅对首屏1秒内必用的https跨域域名（如cdn、字体、api）有效，正确配置可减少200–600ms ttfb。
什么是 preconnect，它真能加速资源加载？
preconnect 是一个 HTML <link> 标签的 rel 值，用于在浏览器解析到该标签时，**提前与指定域名建立 TCP 连接、TLS 握手（如 HTTPS）、甚至 HTTP/2 协议协商**。它不下载任何资源，只建连——所以开销极小，但对后续请求有明显提速效果，尤其在跨域资源（如 CDN、字体、第三方 API）较多时。
常见误判是以为它“预加载资源”，其实它只管“连上那个服务器”。如果目标域名后续根本没用到，这个连接可能被闲置或超时关闭，白忙一场。
使用场景包括：
- CDN 域名（如
https://cdn.example.com） - 字体托管服务（如
https://fonts.googleapis.com和https://fonts.gstatic.com） - 关键 API 网关（如
https://api.myapp.com），且你确定首屏就会发起请求
preconnect 必须写在 preconnect 才会立即触发建连。如果把它放在 preconnect 的声明顺序会影响并发建连数**。现代浏览器对同一域名的并发 TCP 连接数有限制（通常 6 个），而 preconnect 本身也占用连接槽位。如果在 preconnect，部分可能被延迟或丢弃。
实操建议：
- 只对「确定会在首屏 1 秒内发起请求」的域名使用
preconnect - 优先级排序：字体托管 > CDN > API 域名；同域名不要重复声明
- 避免对带路径的 URL 使用（如
https://cdn.example.com/static/），只写根域名（https://cdn.example.com） - 用
crossorigin属性明确是否跨域（HTTPS 下多数需加crossorigin，否则 TLS 握手可能失败）
和 dns-prefetch、preload 的区别在哪？
三者常被混用，但职责完全不同：
dns-prefetch 只做 DNS 查询，最快最轻量，适合不确定是否建连、或仅需解析域名的场景（如用户悬停菜单后才可能访问的子站）。但它不建 TCP，也不握手，后续仍要走完整流程。
preload 是强制提前获取某个具体资源（如 <link rel="preload" href="/font.woff2" as="font">），它会下载+缓存，但不执行。适合已知必用、且体积可控的关键资源。
preconnect 处于中间：比 dns-prefetch 重（含 TCP+TLS），比 preload 轻（不传数据）。它最适合「域名固定、资源路径多变、且后续请求密集」的场景，比如 Google Fonts：你不知道最终加载哪几个字重，但知道一定会从 fonts.gstatic.com 拿。
错误搭配示例：
- 对
https://example.com写preconnect，但首页所有资源都走https://cdn.example.com→ 白建连 - 对
https://fonts.googleapis.com写preconnect，却漏掉https://fonts.gstatic.com（实际字体文件从此域名返回）→ 前者建连无用，后者仍要等 DNS+TCP+TLS - 用
preload加载一个 2MB 图片，又对它的域名写preconnect→ 多余，preload自带建连逻辑
如何验证 preconnect 是否生效？
打开 Chrome DevTools → Network 面板 → 刷新页面 → 点击任意请求 → 查看 Timing 标签页。若看到 “Connection Start” 时间远早于该请求的发起时间（比如在 TTFB 之前 300ms 就显示绿色竖线），说明建连成功。
更直接的方法是过滤 Other 类型请求，在 Initiator 列看到 preconnect 字样。注意：如果某域名出现多次 preconnect 请求，说明有重复声明；如果完全没出现，检查是否拼错域名、是否漏了 https://、或是否被浏览器限制（例如 HTTP 页面中对 HTTPS 域名使用 preconnect 会被忽略）。
实际部署时最容易被忽略的一点：**preconnect 不继承协议升级**。如果你当前页面是 http://，却对 https://api.example.com 做 preconnect，Chrome 会静默忽略——必须协议一致，或页面本身已是 HTTPS。
事情说清了就结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
