是否应该将 preconnect 与样式表一起使用？答案

【问题标题】：Should you use preconnect with stylesheets?是否应该将 preconnect 与样式表一起使用？
【发布时间】：2021-10-03 17:41:02
【问题描述】：

当您想要包含来自 Google Fonts 的字体时，建议您这样做：

<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 的意义何在？浏览器不会同时处理这两个吗？

【问题讨论】：

标签： html css pagespeed

【解决方案1】：

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

您可以查看全文 https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/#:~:text=The%20preconnect%20hint,-Preconnect%20is%20one&text=Initiating%20an%20early%20connection%2C%20which,and%20improves%20Google%20Fonts%20performance.

【讨论】：

那篇文章是关于预连接到 fonts.gstatic.com。我说的是预连接到 fonts.googleapis.com。