性能优化：＜link＞标签中添加 rel=“preconnect“

preconnect是一种资源提示，用于优化网页性能。

它指示浏览器提前与指定域名建立连接（包括DNS查询、TCP握手和TLS协商），减少后续资源加载的延迟。

适用于关键第三方资源（如CDN、API或字体）。

使用时需注意开销，建议仅预连接高频使用的域名（3-6个），可搭配dns-prefetch提升兼容性。

通过将连接步骤提前至HTML解析阶段，有效消除用户感知的延迟。

<link> 标签中添加 preconnect

`preconnect 是什么`

preconnect 是一种资源提示 ，它告诉浏览器："我现在有空，可以先帮我去和某个源建立连接，因为我稍后肯定会用到它。"

它本质上是一个性能优化手段，用于提前完成跨域连接的三个耗时步骤：DNS 查询 、TCP 握手 、TLS 协商（如果是 HTTPS）。

1. 为什么需要它？

当浏览器解析到 <script src="https://cdn.example.com/app.js"> 时，通常需要：

DNS 查找：把域名解析成 IP（耗时 20-120ms）。
TCP 握手：建立连接（耗时一个往返）。
TLS 握手：如果是 HTTPS，验证证书、交换密钥（耗时 1-2 个往返）。

如果不做任何优化，这些步骤会阻塞资源的下载。

preconnect 允许浏览器在 HTML 解析的早期空闲时间预先执行这些步骤。

2. 具体写法

通常放在 <head> 中：

html 复制代码

<head>
  <!-- 告诉浏览器：我稍后会用到这个域名的资源，先帮我建立连接 -->
  <link rel="preconnect" href="https://api.example.com">
  <link rel="preconnect" href="https://cdn.fontawesome.com">
</head>

3. 工作原理

DNS 查询 ：浏览器解析 href 中的域名，提前进行 DNS 解析。
TCP 握手：完成三次握手。
TLS 协商：如果是 HTTPS，完成 TLS 层握手，建立安全的加密通道。

当后续的脚本、样式或接口请求发出时，连接已经建立好了，可以直接复用，从而消除了建立新连接的延迟。

4. 使用场景

第三方资源：Google Fonts、CDN、分析脚本。
关键 API：应用启动时必须请求的后端接口。
跨域资源：字体文件、CDN 上的图片或视频。

5. 注意事项

开销：preconnect 会占用 CPU 和网络带宽。如果预连接的资源最终没有被使用，就是白费资源 。通常建议只对关键路径上 100% 会用到的 3-6 个域名使用。
配合 dns-prefetch：对于只关心 DNS 解析、不关心 TCP 连接的场景（或者为了兼容旧浏览器），通常会组合使用：
html 复制代码
```
<link rel="dns-prefetch" href="https://example.com">
<link rel="preconnect" href="https://example.com" crossorigin>
```

总结

preconnect 不是减少 DNS 查询时间，而是将 DNS 查询、TCP 握手、TLS 协商的时间点提前，从"请求资源时做"提前到"浏览器解析 HTML 有空时做"，从而让用户感知到的延迟消失。

性能优化：＜link＞ 标签中添加 rel=“preconnect“

preconnect 是什么