你应该使用带有样式表的 preconnect 吗？

Should you use preconnect with stylesheets?

提问人：Gert 提问时间：7/28/2021 最后编辑：myfGert 更新时间：11/18/2023 访问量：1555

问：

当您想包含来自 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 有什么意义呢？浏览器不会同时处理这两个吗？

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

Google Fonts Roboto page with selected font and right "Use" pane opened. There is HTML code similar to the snippet above, with two preconnects and one stylesheet links

HTML CSS PageSpeed 预连接

评论

0赞 myf 11/16/2023
有趣的是，Google Fonts 页面上的“在网络上使用”HTML 片段似乎是唯一存在链接的地方;developers.google.com/fonts/docs/css2 似乎根本没有提到它们。preconnect
0赞 morganney 11/18/2023
设置跨源连接是请求/响应生命周期中成本最高的步骤之一。减少 dns + tcp + tls 握手所需的时间是一种优化，因此您可以根据需要进行。当浏览器到达下载样式表的实际行时，连接可能已经建立（或者至少是其中的一部分，如 dns 查找）。仅此而已。preconnect

答：

0赞 shaikh madyan 7/28/2021 #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。

评论

3赞 Gert 7/28/2021
那篇文章是关于 fonts.gstatic.com 的预连接。我说的是与 fonts.googleapis.com 的预连接。
0赞 aarvinr 11/16/2023 #2

通过与 https://fonts.googleapis.com 进行预连接，网页正在优化字体样式表本身的加载。正如谷歌文档：

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

性能提升可能可以忽略不计，因为样式表本身通常很小，所以我不确定为什么默认包含它。但是，从技术上讲，它仍然会做一些事情。我建议删除它，因为它对加载时间没有影响。

-1赞 Prem Singh 11/17/2023 #3

用于外部域，尤其是页面将从中获取资源的域，可以通过减少与建立连接相关的延迟来提高性能。preconnect

评论

1赞 Darryl Noakes 11/17/2023
这没有提供此处尚不存在的任何其他信息，也没有引用任何来源或参考资料。
-1赞 Serhiy Mamedov 11/18/2023 #4

与 rel of 的链接与样式表本身无关。preconnect

<link rel="preconnect">将为任何未来的跨域 HTTP 请求、导航或子资源提供好处。

预连接通过抢先执行部分或全部握手（HTTP 为 DNS+TCP，HTTPS 源为 DNS+TCP+TLS）来加速给定源的未来加载。

在此处阅读完整文档： https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preconnect

评论

1赞 aarvinr 11/18/2023
我不明白你在说什么......分配给域，该域托管样式表，但不托管字体。通过预连接到 ，唯一被优化的是样式表。preconnectfont.googleapis.comfont.googleapis.com
0赞 Max Sinev 11/18/2023 #5

但是，当 fonts.googleapis.com 预连接时，预连接的意义何在 样式表的链接紧随其后？

我宁愿同意在您的代码示例中，好处将是最小的，但与该 css 主机的连接将更早开始。浏览器按顺序解析 HTML，这个预连接链接可以获得一些真正的利润，尤其是当您在预连接链接和谷歌 css 链接之间放置其他外部 css 链接时。因此，谷歌不知道你的网站结构，并在大多数情况下给你“良好实践”代码。

不会浏览器 同时处理这两者？

没有。资源提取将重用浏览器池中的当前预连接状态。我认为这是很常见的情况，因为预连接作业 - DNS解析，TCP连接和TLS协商 - 可能需要很长时间（数十毫秒甚至更多）。

一些相关链接：

  1. https://html.spec.whatwg.org/multipage/links.html#link-type-preconnect
  2. https://andydavies.me/blog/2019/04/17/three-ways-of-checking-your-rel-equals-preconnect-resource-hints-are-working/

上一个：如何使用CSS在点击时更改iOS按钮样式

下一个：如何实现粘性水平滚动的表头