https://www.w3.org/TR/resource-hints/
如果我没有理解错的话，这两种方法都用于启动早期连接，以便在以后更快地加载资源。
preconnect只是做“更多”。
除了更好的浏览器支持外，是否有理由使用dns-prefetch而不是preconnect？我也看到过一些网站在同一个link标签上同时使用rel，以便在可能的情况下使用preconnect，否则就回到dns-prefetch。
<head>
<link
rel="dns-prefetch preconnect"
href="https://fonts.gstatic.com"
crossorigin
>
</head>
6条答案
按热度按时间wsxa1bj11#
我最近一直在研究这个主题，到目前为止，我的（理论）结论如下：
截至2022年11月，当计算浏览器的真实的全球使用率时，两者的浏览器支持率都很高（~94% vs ~83%）
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），并且该资源很可能来自用户的浏览器缓存（相同的资源被用在许多页面上，您的用户将使用warm缓存触发许多这样的页面加载--并且没有从该源获取其他资源），那么preconnect可能会在服务器上创建大量不必要的TCP连接（几秒钟后将被放弃，但仍然，它们在第一个地方是不必要的）和TLS握手（但是在这种情况下，如果您知道确切的URL并且资源非常重要，preload可能是一个选项）。preconnect可能非常适合低流量的网站，不管前面提到的是什么。和往常一样，最好考虑用例、部署、度量和微调。
ntjbwcob2#
1个预连接
最后一个资源提示是预连接。预连接允许浏览器在HTTP请求实际发送到服务器之前建立早期连接。这包括DNS查找、TLS协商、TCP握手。这反过来又消除了往返延迟，为用户节省了时间。
2预取
预取是一个低优先级的资源提示，它允许浏览器在后台（空闲时间）获取以后可能需要的资源，并将它们存储在浏览器的缓存中。一旦页面完成加载，它就开始下载其他资源，如果用户单击预取的链接，它将立即加载内容。
链接预取允许浏览器获取资源，并将其存储在缓存中，假设用户将请求它们。浏览器在HTML或HTTP标题链接中查找预取。
DNS预取允许浏览器在用户浏览时在后台对页面执行DNS查找。这可以最大限度地减少延迟，因为一旦用户单击链接，DNS查找就已经发生了。DNS预取可以通过将rel=“dns-prefetch”标记添加到链接属性来添加到特定的URL。我们建议在Google字体、Google Analytics和CDN等内容上使用此功能。
预呈现与预取非常相似，因为它收集用户可能导航到的下一个资源。不同之处在于，预呈现实际上在后台呈现整个页面，即文档的所有资源。
更多详情：https://www.keycdn.com/blog/resource-hints/
结论
dns-prefetch和preconnect的区别在于dns-prefetch只会执行DNS查找，而preconnect会执行DNS查找、TLS协商和TCP握手，这意味着它避免了资源准备好下载后额外的2个RTT。
一个重要的方面是对dns预取的支持比对预连接的支持大得多。
你可以在这里找到一些具体的例子：https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/
2jcobegt3#
通过提前建立与重要的第三方源的连接，可以将加载时间缩短100-500毫秒。这些数字看起来可能很小，但它们会产生影响
浏览器对
dns-prefetch的支持与preconnect的支持略有不同，因此dns-prefetch可以作为不支持preconnect的浏览器的后备。axr492tv4#
<link rel="dns-prefetch preconnect">doesn’t work in WebKit（野生动物园）。如果你想使用
preconnect（如果可用，2015年底以后的浏览器）和dns-prefetch（2008年以后的浏览器）作为后备，你可以在两个单独的元素中使用<link rel="dns-prefetch">和<link rel="preconnect">。dpiehjr45#
自2016年起，dns-prefetch已被弃用，一些消息来源建议不要同时使用两者，因为浏览器将连接到域两次，这对互联网带宽计划紧张的网站访问者来说是昂贵的。dns-prefetch在过去是首选，因为IE不支持preconnect，但现在IE正在被MS停用。根本不需要使用DNS预取。
1qczuiv06#
DNS预取：在请求资源之前解析域名。
预连接：解析域名+ TCP连接+ TLS握手。
如果你的网站连接了很多第三方域名，那么
DNS lookup会增加大量的延迟，在这种情况下，使用dns-prefetch可以帮助显著减少延迟。在上述情况下，
preconnect也可用于减少DNS lookup延迟，但它也将建立TCP connection并与所有第三方域一起执行TLS handshake。如果不明智地使用，这会在客户端和服务器端增加CPU和Network成本开销。经常预连接，明智预连接
每个打开的套接字都会在客户机和服务器上产生开销，您希望避免打开可能未使用的套接字。
文章由Ilya Grigorik：Link
无预连接
带预连接