6

当我们想要确保一个使用第三方小部件/插件/附加组件/分析等的快速网站时。实现这一点的众多要求之一是为每个单独的域名“dns-prefetch preconnect”（基本上为 DNS 查找等节省一点）

在我们失去任何潜在利益之前，我找不到可以建议我们可以“dns-prefetch preconnect”多少个域名的文档。还记得在过去 Internet Explorer 如何限制可以并行下载的图像数量，只是想知道 Chrome 是否可以有一些理由来限制“dns-prefetch preconnect”请求？

例如：多少算太多？

<link rel="dns-prefetch preconnect" href="https://admin.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://api.amplitude.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://api.segment.io" crossorigin />
<link rel="dns-prefetch preconnect" href="https://app.launchdarkly.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://bam.nr-data.net" crossorigin />
<link rel="dns-prefetch preconnect" href="https://cdn.amplitude.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://cdn.segment.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://customer.api.drift.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://embed.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://event.api.drift.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://events.launchdarkly.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://fonts.googleapis.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://images.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://js-agent.newrelic.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://js.driftt.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://load.sumo.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://metrics.api.drift.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://renderer-assets.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://static.addtoany.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://sumo.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://weclean1.typeform.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://www.google-analytics.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://www.googletagmanager.com" crossorigin />
<link rel="dns-prefetch preconnect" href="https://www.youtube.com" crossorigin />

非常感谢任何链接反馈/建议！

4

4 回答 4

13

不应过度使用资源提示

首先，如下所述，您应该更喜欢preload. 如果您不确切知道您的页面将包含哪些资源，则dns-prefetch和preconnect可能是合适的。

资源提示规范 表明最佳连接数是高度偶然的：

每个源的最佳连接数取决于协商的协议、用户当前的连接配置文件、可用的设备资源、全局连接限制和其他特定于上下文的变量。结果，应该打开多少连接的决定被推迟到用户代理。

两者dns-prefetch和都preconnect表明用户代理“应该”启动该过程，这意味着他们不必这样做。

该规范的编辑 Ilya Grigorik说

也就是说，明智地使用它：每个打开的套接字都会在客户端和服务器上产生成本，并且您希望避免打开可能未使用的套接字。与往常一样，应用、衡量现实世界的影响并进行迭代以从该功能中获得最佳性能里程。

同样是 Google 员工的Sérgio Gomes 更具体地回应了Ilya的警告：

请记住，虽然<link rel="preconnect">很便宜，但它仍然会占用宝贵的 CPU 时间，尤其是在安全连接上。如果在 10 秒内没有使用连接，这尤其糟糕，因为浏览器会关闭它，浪费所有早期的连接工作。

一般来说，尽量使用<link rel="preload">，因为它是一个更全面的性能调整，但请保留<link rel="preconnect">在你的工具带中以应对边缘情况。

Sérgio 继续说明几个例子，其中preconnect，而不是preload，是合适的。我强烈建议看看那些。

Ivan Akulov，前 Google 员工和现任网络性能初创公司 CEO，提出了一个数字建议：

您想加速超过 4-6 个域。不建议使用 <link rel="preconnect" />超过 4-6 个域，因为打开和保持连接是一项昂贵的操作。<link rel="dns-prefetch" />更轻量级，因此如果您也想加快它们的速度，请将其用于其他第三方域。

但 Ivan 虽然是一个有信誉的消息来源，但并未为此建议提供硬性技术支持。

如果不阅读每个相关浏览器的源代码，就不可能辩解地说有多少 dns-prefetch/preconnects 太多了。即使在阅读了源代码之后，它也只能提供关于多少合适的提示。没有硬性限制，但上面的权威来源让我们有理由保持谨慎。

但很难知道在哪里划清界限

只有一种方法可以提高性能：

  1. 决定哪些指标对您和您的用户很重要
  2. 使用最好的合成和真实用户数字来衡量现状
  3. 做出改变并衡量差异

需要多次迭代才能达到最佳配置。最佳提示选择可能会随着时间而改变。从可维护性的角度来看，最好积极地预先连接满足 Sérgio 的“边缘案例”要求的所有内容，并信任浏览器来完成它的工作。但同样，从来没有没有测试过。

其他一些注意事项

那是该页面的很多第三方依赖项。我确信您的工作符合您的要求，但这可能是要求管理层重新评估其中一些必要性的好时机。

最后，请记住，这crossorigin并不适用于每个资源提示。这取决于要下载的资源是否会使用 CORS。如果您不知道，这可能会使所需的预连接数量增加一倍。

与 一起使用时，该crossorigin属性rel="preconnect"不描述目标来源的位置，而是描述将从该来源下载的资产类型。如果资产使用 CORS， crossorigin则需要。如果不使用 CORS，crossorigin则应省略。如果两种类型的资产都存在，则需要两个资源提示。

查看使用 CORS作为指导的资源列表。

于 2019-04-23T16:21:58.207 回答
2

如果您关心 Safari，也请注意此错误：

https://web.dev/preconnect-and-dns-prefetch/

浏览器对 dns-prefetch 的支持与 preconnect 支持略有不同，因此 dns-prefetch 可以作为不支持 preconnect 的浏览器的后备。

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

推荐 - 为了安全地实施后备技术，请使用单独的链接标签。

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

不推荐——在同一个标​​签中实现 dns-prefetch 回退会导致 Safari 中的一个错误，即取消预连接。

于 2019-08-16T16:14:51.087 回答
2

在旧版 Chrome 中，有六个并发 DNS 查找的限制。从适用于 Windows、Mac 和 Linux 的 Chrome 版本 26 开始，有一个异步 DNS 解析器，它有效地消除了这个限制（或者可能只是增加了它）：

“6 个 DNS 请求不再适用于异步 DNS 解析器，但您的观点仍然存在……我们限制了飞行中解析的数量。 ”——谷歌 Web 性能工程师Ilya Grigorik（来自Twitter）

于 2019-10-31T22:50:20.053 回答
1

我还很新，还无法添加评论，所以添加一个答案。

根据我自己的测试，Chrome 在 DNS 缓存中的 TTL 似乎为1000 这可能是“过早”"dns-prefetch preconnect"打开连接实际上可能会对所需性能产生负面影响的原因。

您还可以检查preconnect vs dns-prefetch 资源提示

“TTL”是一个缩写：生存时间

于 2019-04-25T11:57:32.523 回答