尽管每个人的目标都是减少 Web 性能预算，但仍然需要使用第三方服务。使用这些服务时，“DNS查找“时间可能会消耗掉预算的很大一部分，具体取决于服务的数量。这些负载会影响页面速度的各个方面，包括首次内容绘制 (FCP)。

这两个概念的目的是为了优化第三方的连接时间。在了解这两个概念的区别之前，有必要先了解在发出第三方请求时究竟发生了什么：

  1. 域名解析后即可获得IP地址。
  2. 与服务器建立连接。
  3. 连接已加密，以确保安全。

对于每个第三方连接，都会重复此层次结构。这就是 preconnect 和 dns-prefetch 之间的区别所在。

  • 预连接： 确保上述所有三个步骤均已预先配置。
  • DNS 预取： 仅起到第一步将域名转换为IP地址的作用。

如您所见，预连接更全面、更有益。然而，一切都是有代价的。对所有连接使用预连接可能会对页面的优化产生负面影响。因此，您您应该仅对关键连接使用预连接，对所有其他第三方连接使用 dns-prefetch.

图像14.png
来源: https://web.dev/preconnect-and-dns-prefetch/

使用总结

根据以上信息，下面简要总结一下它们的用法：

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

浏览器兼容性

在讨论它们的用法时，还必须提到浏览器兼容性。这两个密切相关的概念得到了现代浏览器的广泛支持，但它们的用法并不完全重叠。 大约 97% 的浏览器支持 Preconnect，而 83% 的浏览器支持 dns-prefetch（截至 2024 年 XNUMX 月）.

对 Web 性能预算的贡献

  • 预连接可以带来总体速度提升 100-500ms.
  • DNS-Prefetch 可以通过以下方式加速每个连接 20-120ms.

我们计划进行自己的测试以提供更多令人满意的本地示例。

最后，我要推荐并赞扬 Ceyhun Enki Aksan 的博客，这对我准备这篇文章的理解有很大帮助： Ceyhun Enki Aksan 的博客。