我们应该 "dns-prefetch preconnect" 和 Chrome 的域数量有限制吗？
Is there a limit to how many domains we should "dns-prefetch preconnect" with Chrome?
当我们想要确保使用第三方 widgets/plugins/add-ons/analytics 等的超快网站时。实现这一目标的众多要求之一是 "dns-prefetch preconnect" 每个单独的域名（基本上节省一点用于 DNS 查找等）
我找不到可以建议在我们失去任何潜在利益之前可以 "dns-prefetch preconnect" 多少个域名的文档。记得以前 Internet Explorer 是如何限制并行下载的图像数量的，只是想知道 Chrome 是否有限制 "dns-prefetch preconnect" 请求的理由？
For example: how many is too many?
<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 />
非常感谢任何链接feedback/advice！
不应过度使用资源提示
首先，如下所述，您应该更喜欢preload。如果您不确切知道您的页面将包含哪些资源，dns-prefetch 和 preconnect 可能是合适的。
最佳连接数高度随机的resource hint specification indicates：
The optimal number of connections per origin is dependent on the
negotiated protocol, users current connectivity profile, available
device resources, global connection limits, and other context specific
variables. As a result, the decision for how many connections should
be opened is deferred to the user agent.
dns-prefetch 和 preconnect 都表示用户代理 "should" 启动进程，这意味着他们不必这样做。
Ilya Grigorik，该规范的编辑，says
That said, use it wisely: each open socket incurs costs both on the
client and server, and you want to avoid opening sockets that might go
unused. As always, apply, measure real-world impact, and iterate to
get the best performance mileage from this feature.
Sérgio Gomes，也是 Google 员工，echos Ilya 的警告更加具体：
Bear in mind that while <link rel="preconnect"> is pretty cheap, it
can still take up valuable CPU time, particularly on secure
connections. This is especially bad if the connection isn’t used
within 10 seconds, as the browser closes it, wasting all of that early
connection work.
In general, try to use <link rel="preload"> wherever you can, as it’s
a more comprehensive performance tweak, but do keep <link rel="preconnect"> in your toolbelt for the edge cases.
Sérgio 继续举例说明 preconnect 比 preload 更合适。我强烈推荐 taking a look。
Ivan Akulov, former Googler and current web performance startup CEO, ventures a numerical recommendation:
You want to speed up more than 4-6 domains. It’s not recommended to use <link rel="preconnect" /> with more than 4-6 domains, as opening and keeping a connection is an expensive operation. <link rel="dns-prefetch" /> is more lightweight, so use it for other third-party domains if you want to speed them up too.
但是 Ivan，虽然是一个有信誉的消息来源，但并未为此建议提供硬性技术支持。
如果不阅读每个相关浏览器的源代码，就无法断言有多少 dns-prefetch/preconnects 太多了。即使在阅读了源代码之后，它也只能提供一个提示，说明有多少是合适的。没有硬性限制，但上面的权威来源让我们有理由保持谨慎。
但很难知道在哪里画线
提高性能只有一种方法：
- 确定哪些指标对您和您的用户很重要
- 使用可用的最佳合成和真实用户数字来衡量现状
- 进行更改并衡量差异
需要多次迭代才能确定最佳配置。并且最佳提示选择可能会随着时间而改变。从可维护性的角度来看，最好预先连接满足 Sérgio "edge case" 要求的所有内容，并信任浏览器来完成它的工作。但同样，永远不要没有测试。
一些其他笔记
该页面有很多第三方依赖项。我确定您的工作符合您的要求，但现在可能是要求管理层重新评估其中一些必要性的好时机。
最后，请记住crossorigin isn't appropriate for every resource hint。这取决于要下载的资源是否使用 CORS。如果您不知道，这可能会使所需的预连接数量增加一倍。
The crossorigin attribute, when used with rel="preconnect", doesn't
describe where the target origin is but rather what kind of assets
will be downloaded from that origin. If the assets use CORS,
crossorigin is needed. If CORS won't be used, crossorigin should be
omitted. If both types of assets will be present, two resource hints
are necessary.
看看这个 list of resources that use CORS 以获得指导。
我是新手，还不能添加评论，所以添加一个答案。
根据我自己的测试，Chrome 似乎有 TTL of 1000 in the DNS Cache
这可能是打开 "too early" 时 "dns-prefetch preconnect" 连接实际上可能会对所需性能产生负面影响的原因。
您还可以查看 preconnect vs dns-prefetch resource hints
"TTL" is an abbreviation for: Time To Live
如果您关心 Safari，请注意此错误：
https://web.dev/preconnect-and-dns-prefetch/
Browser support for dns-prefetch is slightly different from preconnect support, so dns-prefetch can serve as a fallback for browsers that don't support preconnect.
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
Recommended — To safely implement the fallback technique use separate
link tags.
<link rel="preconnect dns-prefetch" href="http://example.com">
Not recommended — Implementing dns-prefetch fallback in the same
tag causes a bug in Safari where preconnect gets cancelled.
在旧 Chrome 版本中存在六个并发 DNS 查找的限制。对于 Windows、Mac 和 Linux 的 Chrome 版本 26，有一个异步 DNS 解析器，它有效地消除了该限制（或者可能只是增加了它）：
"6 DNS requests is no longer true with async DNS resolver, but your point still stands.. we limit number of inflight resolves." — Ilya Grigorik, Web performance engineer at Google (via Twitter)
当我们想要确保使用第三方 widgets/plugins/add-ons/analytics 等的超快网站时。实现这一目标的众多要求之一是 "dns-prefetch preconnect" 每个单独的域名（基本上节省一点用于 DNS 查找等）
我找不到可以建议在我们失去任何潜在利益之前可以 "dns-prefetch preconnect" 多少个域名的文档。记得以前 Internet Explorer 是如何限制并行下载的图像数量的，只是想知道 Chrome 是否有限制 "dns-prefetch preconnect" 请求的理由？
For example: how many is too many?
<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 />
非常感谢任何链接feedback/advice！
不应过度使用资源提示
首先，如下所述，您应该更喜欢preload。如果您不确切知道您的页面将包含哪些资源，dns-prefetch 和 preconnect 可能是合适的。
最佳连接数高度随机的resource hint specification indicates：
The optimal number of connections per origin is dependent on the negotiated protocol, users current connectivity profile, available device resources, global connection limits, and other context specific variables. As a result, the decision for how many connections should be opened is deferred to the user agent.
dns-prefetch 和 preconnect 都表示用户代理 "should" 启动进程，这意味着他们不必这样做。
Ilya Grigorik，该规范的编辑，says
That said, use it wisely: each open socket incurs costs both on the client and server, and you want to avoid opening sockets that might go unused. As always, apply, measure real-world impact, and iterate to get the best performance mileage from this feature.
Sérgio Gomes，也是 Google 员工，echos Ilya 的警告更加具体：
Bear in mind that while
<link rel="preconnect">is pretty cheap, it can still take up valuable CPU time, particularly on secure connections. This is especially bad if the connection isn’t used within 10 seconds, as the browser closes it, wasting all of that early connection work.In general, try to use
<link rel="preload">wherever you can, as it’s a more comprehensive performance tweak, but do keep<link rel="preconnect">in your toolbelt for the edge cases.
Sérgio 继续举例说明 preconnect 比 preload 更合适。我强烈推荐 taking a look。
Ivan Akulov, former Googler and current web performance startup CEO, ventures a numerical recommendation:
You want to speed up more than 4-6 domains. It’s not recommended to use
<link rel="preconnect" />with more than 4-6 domains, as opening and keeping a connection is an expensive operation.<link rel="dns-prefetch" />is more lightweight, so use it for other third-party domains if you want to speed them up too.
但是 Ivan，虽然是一个有信誉的消息来源，但并未为此建议提供硬性技术支持。
如果不阅读每个相关浏览器的源代码，就无法断言有多少 dns-prefetch/preconnects 太多了。即使在阅读了源代码之后，它也只能提供一个提示，说明有多少是合适的。没有硬性限制，但上面的权威来源让我们有理由保持谨慎。
但很难知道在哪里画线
提高性能只有一种方法：
- 确定哪些指标对您和您的用户很重要
- 使用可用的最佳合成和真实用户数字来衡量现状
- 进行更改并衡量差异
需要多次迭代才能确定最佳配置。并且最佳提示选择可能会随着时间而改变。从可维护性的角度来看，最好预先连接满足 Sérgio "edge case" 要求的所有内容，并信任浏览器来完成它的工作。但同样，永远不要没有测试。
一些其他笔记
该页面有很多第三方依赖项。我确定您的工作符合您的要求，但现在可能是要求管理层重新评估其中一些必要性的好时机。
最后，请记住crossorigin isn't appropriate for every resource hint。这取决于要下载的资源是否使用 CORS。如果您不知道，这可能会使所需的预连接数量增加一倍。
The
crossoriginattribute, when used withrel="preconnect", doesn't describe where the target origin is but rather what kind of assets will be downloaded from that origin. If the assets use CORS,crossoriginis needed. If CORS won't be used,crossoriginshould be omitted. If both types of assets will be present, two resource hints are necessary.
看看这个 list of resources that use CORS 以获得指导。
我是新手，还不能添加评论，所以添加一个答案。
根据我自己的测试，Chrome 似乎有 TTL of 1000 in the DNS Cache
这可能是打开 "too early" 时 "dns-prefetch preconnect" 连接实际上可能会对所需性能产生负面影响的原因。
您还可以查看 preconnect vs dns-prefetch resource hints
"TTL" is an abbreviation for: Time To Live
如果您关心 Safari，请注意此错误：
https://web.dev/preconnect-and-dns-prefetch/
Browser support for dns-prefetch is slightly different from preconnect support, so dns-prefetch can serve as a fallback for browsers that don't support preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">Recommended — To safely implement the fallback technique use separate link tags.
<link rel="preconnect dns-prefetch" href="http://example.com">Not recommended — Implementing dns-prefetch fallback in the same tag causes a bug in Safari where preconnect gets cancelled.
在旧 Chrome 版本中存在六个并发 DNS 查找的限制。对于 Windows、Mac 和 Linux 的 Chrome 版本 26，有一个异步 DNS 解析器，它有效地消除了该限制（或者可能只是增加了它）：
"6 DNS requests is no longer true with async DNS resolver, but your point still stands.. we limit number of inflight resolves." — Ilya Grigorik, Web performance engineer at Google (via Twitter)