你是否应该在样式表中使用preconnect？

Question

你是否应该在样式表中使用preconnect？

8

当您想要包含来自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 的预连接有什么意义呢？浏览器不会同时处理它们吗？

- Gert

有趣的是，在Google Fonts页面上，“在网页上使用”的HTML代码片段似乎是唯一一个包含preconnect链接的地方；https://developers.google.com/fonts/docs/css2似乎根本没有提到它们。 - undefined

建立跨源连接是请求/响应生命周期中最昂贵的步骤之一。缩短 DNS + TCP + TLS 握手所需的时间是一种优化，因此如果需要，可以进行“预连接”。当浏览器到达实际下载样式表的行时，连接可能已经建立（或者至少部分建立，比如 DNS 查找）。就是这样。 - undefined

5个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- shaikh madyan · Answer 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。

- Max Sinev · Answer 2

但是，当样式表链接紧随其后时，预连接到fonts.googleapis.com有什么意义呢？

我更倾向于同意，在您的代码示例中，好处将是微不足道的，但与该CSS主机的连接将提前一点。浏览器按顺序解析HTML，并且当您在预连接链接和Google CSS链接之间放置其他外部CSS链接时，此预连接链接可以获得一些真正的好处。因此，Google不知道您的站点结构，并为大多数情况提供“良好的实践”代码。

浏览器不会同时处理这两个资源，而是会重用浏览器池中的当前预连接状态。我认为这是非常常见的情况，因为预连接工作（DNS解析、TCP连接和TLS协商）可能需要很长时间（几十毫秒甚至更长）。

一些相关链接：

- aarvinr · Answer 3

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

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

由于样式表本身通常很小，因此性能提升可能微不足道，所以我不确定为什么默认情况下会包含它。然而，从技术上讲，它确实起到了一定作用。我建议将其删除，因为它对加载时间没有任何影响。

- Serhiy Mamedov · Answer 4

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

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

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

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

- Prem Singh · Answer 5

使用preconnect来预连接外部域名，尤其是那些页面将获取资源的域名，可以是一个良好的实践，通过减少建立连接所带来的延迟来提高性能。