Question

https://www.w3.org/TR/resource-hints/

如果我理解正确，两者都会用于启动早期连接以便以后更快地加载资源。

preconnect正在做更多＆＃34;。

除了更好的浏览器支持之外，有没有理由在预连接上使用dns-prefetch？我也看到网站在相同的链接标签上使用两个rel，以便尽可能使用预连接，如果没有，则回退到dns-prefetch。

<head>
  <link
    rel="dns-prefetch preconnect"
    href="https://fonts.gstatic.com"
    crossorigin
  >
</head>

Answer 1

我最近一直在研究该主题，到目前为止，我的（理论上）结论如下：

当计算浏览器的实际全球使用量（~73%与~74%）时，截至2018年中的浏览器支持差异可以忽略不计

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可能是低流量网站的理想选择，无论前面提到的是什么。

和往常一样，考虑用例，进行部署，度量和微调。

Answer 2

1预连接

我们要讨论的最终资源提示是预连接。预先连接允许浏览器在HTTP请求实际发送到服务器之前设置早期连接。这包括DNS查找，TLS协商，TCP握手。这反过来又消除了往返延迟并为用户节省了时间。

2预取

预取是一种低优先级资源提示，允许浏览器在后台获取资源（空闲时间），并将其存储在浏览器的缓存中。页面加载完成后，它开始下载其他资源，如果用户点击预取链接，它将立即加载内容。

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＆amp; amp; PRECONNECT

dns-prefetch和preconnect之间的区别是dns-prefetch只会执行DNS查找，而preconnect将执行DNS查找，TLS协商和TCP握手。这意味着一旦资源准备好下载，它就可以避免额外的2个RTT。

一个重要的方面是对dns-prefetch的支持远远大于对preconnect的支持。

您可以在此处找到一些具体示例：https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/

Answer 3

<link rel="dns-prefetch preconnect"> doesn’t work in WebKit（Safari）。

如果您想在<link rel="dns-prefetch">中使用<link rel="preconnect">和preconnect（在2015年末开始使用浏览器），请在两个单独的元素中使用dns-prefetch和[20, 20, 21, 21, 21, 21]浏览器（自2008年以来））作为后备广告。

Answer 4

截至 2021 年，所有主要浏览器都支持预连接。 dns-prefetch 自 2016 年以来已被弃用，一些消息来源建议不要同时使用两者，因为浏览器将连接到域两次，这对于互联网带宽计划紧张的站点访问者来说是昂贵的。 dns-prefetch 过去是首选，因为 IE 不支持 preconnect，但现在 IE 被 MS 停产，根本不需要使用 dns-prefetch。

preconnect vs dns-prefetch资源提示

4 个答案: