概述

预连接是一种资源提示，它告诉浏览器与浏览器尚未确定需要建立的域建立主动HTTP连接。创建HTTP连接需要很多步骤，包括DNS查找、连接TCP、协商安全的TLS连接等，这些步骤需要数十甚至数百毫秒。如果能够提前连接（预连接）到第三方域来交付重要的首屏内容，可以提升页面加载速度。

解决方案

考虑添加 preconnect 或 dns-prefetch 资源提示来建立与重要第三方源的早期连接。

<link rel="preconnect"> 会通知浏览器，您的页面打算与另一个源建立连接，而且您希望该过程尽快开始。

在慢速网络中建立连接通常需要消耗大量时间，尤其是在涉及安全连接时，因为它可能涉及到 DNS 查找、重定向以及用于处理用户请求而与最终服务器的多次往返。

提前处理好所有这些任务可以让用户觉得应用更快，而不会对带宽的使用产生负面影响。建立连接的大部分时间都花在了等待上，而不是用来交换数据。

只要向页面添加链接标签，就可以将您的意图告知浏览器：

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

这样一来，浏览器就知道该页面打算连接到 example.com 并从那里检索内容。

请记住，虽然 <link rel="preconnect"> 消耗不大，但它仍然会占用宝贵的 CPU 时间，尤其是在创建安全连接时。如果在 10 秒内没有使用连接，这种情况尤其糟糕，因为浏览器会关闭它，从而浪费所有早期的连接工作。

通常情况下，请尝试使用 <link rel="preload"> ，因为它提供更全面的性能调整。

<link rel="dns-prefetch"> 是另一个与连接相关的 <link>。它仅负责 DNS 查找，但具有更广泛的浏览器支持，因此可以作为一个很好的后备。它的用法完全相同：

<link rel="dns-prefetch" href="https://example.com">.