https://www.w3.org/TR/resource-hints/
如果我理解正确，两者都用于启动早期连接以在以后更快地加载资源。
preconnect 只是做“更多”。
除了更好的浏览器支持之外，还有什么理由使用 dns-prefetch 而不是 preconnect？我还看到网站在同一个链接标签上使用两个 rel，以便尽可能使用 preconnect，如果没有，则回退到 dns-prefetch。
<head>
<link
rel="dns-prefetch preconnect"
href="https://fonts.gstatic.com"
crossorigin
>
</head>
【问题讨论】：
标签： google-chrome networking web dns latency
我最近一直在研究这个话题，到目前为止，我的（理论）结论如下：
当计算浏览器的实际全球使用量时，浏览器支持差异可以忽略不计（~73% 与 ~74%）
dns-prefetch = DNS 和preconnect = DNS + TCP + TLS。请注意，DNS 查找执行起来非常便宜（对 DNS 服务器的简单查询响应，在浏览器中缓存一小段时间），而 TCP 和 TLS 涉及一些服务器资源。
因此，实际的区别是，如果您知道服务器获取 肯定会发生，preconnect 很好。如果它只是偶尔发生，并且您预计流量很大，preconnect 可能会触发大量无用的 TCP 和 TLS 工作，而dns-prefetch 可能更适合。
例如：
https://backend.example.com/giveMeFreshData，并且响应不可缓存，则preconnect 非常适合https://statics-server.example.com/some-image.jpg 或https://statics-server.example.com/some-css.css 这样的静态资源，并且该资源很可能来自用户的浏览器缓存（在许多页面上使用相同的资源，并且您的用户将使用热缓存触发大量这样的页面加载 - 并且不会从该来源获取其他资源），然后preconnect 可能会在您的服务器上创建大量不必要的 TCP 连接（几秒钟后将放弃，但它们一开始就不是必需的）和 TLS 握手（但在这种情况下，如果您知道确切的 URL 并且资源非常重要，preload 可能是一个选项）。preconnect 可能非常适合低访问量网站，不管前面提到的情况如何。与往常一样，最好考虑用例、部署、衡量和微调。
【讨论】：
1 预连接
我们要讨论的最后一个资源提示是预连接。 Preconnect 允许浏览器在 HTTP 请求实际发送到服务器之前设置早期连接。这包括 DNS 查找、TLS 协商、TCP 握手。这反过来又消除了往返延迟并为用户节省了时间。
2 预取
Prefetch 是一种低优先级的资源提示，它允许浏览器在后台（空闲时间）获取稍后可能需要的资源，并将它们存储在浏览器的缓存中。一旦页面完成加载，它就会开始下载额外的资源，如果用户点击预取的链接，它会立即加载内容。
2.1 链接预取
链接预取允许浏览器获取资源，将它们存储在缓存中，假设用户会请求它们。浏览器在 HTML 或 HTTP 标头链接中查找预取。
2.2 DNS 预取
DNS 预取允许浏览器在用户浏览时在后台对页面执行 DNS 查找。这最大限度地减少了延迟，因为一旦用户单击链接，DNS 查找就已经发生。通过将 rel="dns-prefetch" 标记添加到链接属性，可以将 DNS 预取添加到特定 url。我们建议在 Google 字体、Google Analytics 和您的 CDN 等内容上使用它。
2.3 预渲染
预渲染与预取非常相似，因为它会收集用户下一步可能导航到的资源。不同之处在于预渲染实际上是在后台渲染整个页面，即文档的所有资产。
更多详情：https://www.keycdn.com/blog/resource-hints/
结论
dns-prefetch 和 preconnect 的主要区别
dns-prefetch 和 preconnect 的区别在于 dns-prefetch 只会做 DNS 查找，而 preconnect 会做 DNS 查找、TLS 协商和 TCP 握手。这意味着一旦准备好下载资源，它就避免了额外的 2 RTT。
一个重要的方面是对 dns-prefetch 的支持远大于对 preconnect 的支持。
你可以在这里找到一些具体的例子：https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/
【讨论】：
<link rel="dns-prefetch preconnect">doesn’t work in WebKit（Safari）。
您可以在两个单独的元素中使用<link rel="dns-prefetch"> 和<link rel="preconnect">，如果您想使用preconnect（如果可用，自2015 年底以来的浏览器）和dns-prefetch（自2008 年以来的浏览器中）作为后备。
【讨论】：
自 2021 年起，所有主要浏览器都支持预连接。 dns-prefetch 自 2016 年以来已被弃用，一些消息来源建议不要同时使用两者，因为浏览器将连接到域两次，这对于互联网带宽计划紧张的网站访问者来说是昂贵的。以前首选 dns-prefetch 是因为 IE 不支持 preconnect，但现在 IE 被 MS 停用了，根本不需要使用 dns-prefetch。
【讨论】：