rel=预连接

<link> 元素的 rel 属性的 preconnect 关键字向浏览器暗示用户可能需要来自目标资源来源的资源，因此浏览器可以通过抢先启动到该来源的连接来改善用户体验。预连接通过抢先执行部分或全部握手（对于 HTTP 为 DNS+TCP，对于 HTTPS 源为 DNS+TCP+TLS）来加速来自给定源的未来加载。

¥The preconnect keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin. Preconnecting speeds up future loads from a given origin by preemptively performing part or all of the handshake (DNS+TCP for HTTP, and DNS+TCP+TLS for HTTPS origins).

<link rel="preconnect"> 将为任何未来的跨源 HTTP 请求、导航或子资源带来好处。它对同源请求没有任何好处，因为连接已经打开。

¥<link rel="preconnect"> will provide a benefit to any future cross-origin HTTP request, navigation or subresource. It has no benefit on same-origin requests because the connection is already open.

如果一个页面需要连接到许多第三方域，那么预先连接它们可能会适得其反。<link rel="preconnect"> 提示最好仅用于最关键的连接。对于其他人，只需使用 <link rel="dns-prefetch"> 即可节省第一步（DNS 查找）的时间。

¥If a page needs to make connections to many third-party domains, preconnecting them all can be counterproductive. The <link rel="preconnect"> hint is best used for only the most critical connections. For the others, just use <link rel="dns-prefetch"> to save time on the first step — the DNS lookup.

<link rel="preconnect" href="https://example.com" />

Link: https://example.com; rel="preconnect"

¥Specifications

¥Browser compatibility