### [preconnect：提前握手省下几百毫秒](https://www.huociguo.com/article/1844)

**Published:** 2026-10-03T02:35:19

**Author:** 米了

**Excerpt:** 🔌 页面要连 CDN、字体、接口三个域，首屏明显慢。在 里加几条 ，加载快了一截。 提前把三件事做了：DNS …

🔌 页面要连 CDN、字体、接口三个域，首屏明显慢。在 `head` 里加几条 `<link rel="preconnect">`，加载快了一截。

`preconnect` 提前把三件事做了：DNS 解析、TCP 握手、TLS 协商。等真正发请求时，这些准备工作已完成，省下往返时间。

![网络连接示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-4486718.jpeg)

提前建连，请求发出去就少等

写法：

```
<link rel="preconnect" href="https://cdn.example.com">
<link rel="preconnect" href="https://api.example.com" crossorigin>
```

⚠️ 别贪多。每个预连接都占一条连接资源，只给关键第三方域。和 `dns-prefetch` 比，`preconnect` 多做 TCP 和 TLS，代价也更大。跨域带凭据的资源记得加 `crossorigin`，否则浏览器会再握一次。

其余优化，预连接配合 `preload` 用，关键资源路径更短。

**Tags:** DNS预连接, preconnect, 握手优化, 资源预连接, 首屏提速

**Categories:** HTML5

---