我们应该在Chrome中“ dns-prefetch preconnect”来限制多少个域？

Question

当我们要确保使用第三方窗口小部件/插件/附加组件/分析等的快速网站时，要达到这一目的，许多要求之一就是为每个单独的域名“ 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 />

任何链接的反馈/建议，不胜感激！

Answer 1

资源提示不应过度使用

首先，如下所述，您应该首选preload。如果您不确定页面将包括哪些资源，则dns-prefetch和preconnect可能是合适的。

该资源提示规范 表明该连接的最佳数量是非常偶然：

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

双方dns-prefetch并preconnect指示用户代理“应该”启动进程，这意味着他们没有这样做。

该规范的编辑Ilya Grigorik 说

就是说，明智地使用它：每个打开的套接字都会在客户端和服务器上产生成本，并且您要避免打开可能不使用的套接字。与往常一样，应用，测量实际影响，并反复进行迭代以从此功能获得最佳性能。

还是Google员工的SérgioGomes 更加明确地回应了 Ilya的警告：

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

通常，请尝试在<link rel="preload">任何可能的地方使用它，因为这是对性能进行更全面的调整，但<link rel="preconnect">请始终牢牢把握边缘情况。

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

前Googler和现任网络性能初创公司首席执行官Ivan Akulov 提出了一个数字建议：

您要加速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进行指导的资源列表。