当我们要确保使用第三方窗口小部件/插件/插件/分析等的快速网站时，要达到此目的，许多要求之一就是为每个域“ 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 />
任何链接的反馈/建议都将不胜感激！
答案 0 :(得分：2)
首先，如下所述，您应该选择preload。如果您不确定页面将包含哪些资源，则dns-prefetch和preconnect可能是合适的。
resource hint specification indicates的最佳连接数取决于以下条件：
每个起点的最佳连接数取决于 协商协议，用户当前的连接配置文件，可用 设备资源，全局连接限制和其他特定于上下文的资源 变量。结果，决定应该连接多少个连接 打开操作将延迟给用户代理。
dns-prefetch和preconnect均指示用户代理“应”启动该过程，这意味着他们不必这样做。
该规范的编辑Ilya Grigorik says
也就是说，请明智地使用它：每个打开的套接字都会在 客户端和服务器，并且您要避免打开可能会出现的套接字 没用过。与往常一样，应用，衡量现实世界的影响并迭代 通过此功能获得最佳性能里程。
也是Google员工的塞吉奥·戈麦斯（SérgioGomes）echos伊利亚的警告更为具体：
请记住，尽管
<link rel="preconnect">很便宜， 仍然会占用宝贵的CPU时间，尤其是在安全的情况下 连接。如果不使用连接，这尤其糟糕 在10秒内，当浏览器关闭时，所有的时间都浪费了 连接工作。通常，请尽可能使用
<link rel="preload">，因为它是 进行了更全面的性能调整，但请在边缘情况下将<link rel="preconnect">保留在工具栏中。
Sérgio继续说明几个示例，其中preconnect而不是preload是合适的。我强烈推荐taking a look。
Ivan Akulov，前Googler和现任网络性能初创公司首席执行官ventures a numerical recommendation：
您要加速4-6个以上的域。不建议将
<link rel="preconnect" />用于4-6个以上的域，因为打开并保持连接是一项昂贵的操作。<link rel="dns-prefetch" />的功能更轻巧，因此如果您想加快其他第三方域名的使用，也可以将其使用。
但是，伊凡（Ivan）虽然是著名的消息来源，但并未为这项建议提供坚决的技术支持。
如果不阅读每个相关浏览器的源代码，就无法辩解地说有多少dns-prefetch / preconnects太多了。即使在阅读源代码之后，它也只能提示多少个合适的代码。没有硬性限制，但是上面的权威资料使我们有理由保持谨慎。
只有一种方法可以提高性能：
要获得最佳配置，将需要进行多次迭代。最佳提示选择可能会随时间而变化。从可维护性的角度来看，最好积极地连接符合Sérgio的“边缘案例”要求的所有内容，并信任浏览器来完成其工作。但是同样，从来没有测试。
该页面有很多第三方依赖项。我确定您在自己的要求之内，但这可能是要求管理层重新评估其中某些需求的绝佳时机。
最后，请记住crossorigin isn't appropriate for every resource hint。这取决于要下载的资源是否将使用CORS。如果您不知道，那可能会使所需的预连接数量增加一倍。
crossorigin属性与rel="preconnect"一起使用时不 描述目标来源，而不是描述哪种资产 将从该来源下载。如果资产使用CORS， 需要crossorigin。如果不使用CORS，则应使用crossorigin省略。如果两种资产都存在，则有两个资源提示 是必需的。
看看这个list of resources that use CORS以获得指导。
答案 1 :(得分：2)
如果您关心Safari，也请注意此错误：
https://web.dev/preconnect-and-dns-prefetch/
浏览器对dns-prefetch的支持与预连接支持略有不同，因此dns-prefetch可以作为不支持预连接的浏览器的后备。
<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中的错误，导致预连接被取消。
答案 2 :(得分：2)
在较旧的Chrome版本中，最多只能进行六个并发DNS查找。从适用于Windows，Mac和Linux的Chrome版本26开始，有一个异步DNS解析器，该解析器有效地消除了该限制（或可能只是增加了该限制）：
“对于6个DNS请求，异步DNS解析器已不再适用，但您的观点仍然成立。.我们限制了机上解析的数量。” – Ilya Grigorik ，网站Google（via Twitter）的性能工程师
答案 3 :(得分：1)
我还很陌生，还无法添加评论，所以请添加答案。
根据我自己的测试，Chrome似乎有一个TTL of 1000 in the DNS Cache
这可能是以下原因：“过早”打开"dns-prefetch preconnect"连接实际上可能会对期望的性能产生负面影响。
您还可以选中preconnect vs dns-prefetch resource hints
“ TTL”是“生存时间”的缩写