您应该将预连接与样式表一起使用吗？

Question

当您想要包含 Google Fonts 中的字体时，它建议 ([1]) 您这样做：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

预连接到fonts.gstatic.com是有意义的，因为浏览器只有在下载样式表后才会发现该域。但是，当样式表的链接就在fonts.googleapis.com之后时，预连接到 fonts.googleapis.com 的意义何在？浏览器不会同时处理这两个吗？

---

[1] 请参阅： https: //fonts.google.com/share?selection.family =Roboto，选择某种样式，然后单击右上角的公文包图标。）

Answer 1

启动早期连接（包括 DNS 查找、TCP 握手和可选的 TLS 协商）允许用户代理掩盖建立连接的高延迟成本。大多数浏览器都支持预连接，并提高了 Google Fonts 的性能。

您可以查看全文 https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/#:~:text=The%20preconnect%20hint,-Preconnect%20is%20one&text=Initiating% 20an%20early%20connection%2C%20which，并且%20改进%20Google%20Fonts%20性能。