preconnect vs dns-prefetch资源提示
Rob*_*ler 26 dns networking google-chrome latency web
https://www.w3.org/TR/resource-hints/
如果我理解正确,两者都用于启动早期连接以便以后更快地加载资源.
预连接正在做"更多".
除了更好的浏览器支持外,有没有理由在预连接上使用dns-prefetch？我也看到网站在相同的链接标签上使用rel,以便尽可能使用预连接,如果没有,则回退到dns-prefetch.
<head>
<link
rel="dns-prefetch preconnect"
href="https://fonts.gstatic.com"
crossorigin
>
</head>
jak*_*b.g 25
我最近一直在研究该主题，到目前为止，我的（理论上）结论如下：
截至2018年中，在计算浏览器的实际全球使用量时，浏览器支持差异可以忽略不计（〜73％ vs〜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握手（但是，在这种情况下，preload如果您知道确切的URL并且资源非常重要，则可以选择）。 - 如果您网站上的流量很小，那么这种差异就不会对其造成太大影响，因此
preconnect，不管前面提到的是什么，它都可能非常适合低流量网站。
与往常一样，最好考虑用例，进行部署，度量和微调。
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和preconnect之间的主要区别
dns-prefetch和preconnect之间的区别是dns-prefetch只会执行DNS查找,而preconnect将执行DNS查找,TLS协商和TCP握手.这意味着一旦准备好下载资源,它就可以避免额外的2个RTT.
一个重要的方面是对dns-prefetch的支持远远大于对preconnect的支持.
你可以在这里找到一些具体的例子:https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/
通过尽早建立与重要第三方源的连接，您可以将加载时间加快 100\xe2\x80\x93500 毫秒。这些数字可能看起来很小，但它们会产生影响
\n
浏览器支持dns-prefetch与支持略有不同preconnect，因此dns-prefetch可以作为不支持的浏览器的后备preconnect.
