dns-prefetch

DNS-prefetch (DNS 预获取) 是尝试在请求资源之前解析域名。这可能是后面要加载的文件,也可能是用户尝试打开的链接目标。

为什么要使用 dns-prefetch?

当浏览器从(第三方)服务器请求资源时,必须先将该跨域域名解析为 IP地址,然后浏览器才能发出请求。此过程称为 DNS解析。DNS 缓存可以帮助减少此延迟,而 DNS解析可以导致请求增加明显的延迟。对于打开了与许多第三方的连接的网站,此延迟可能会大大降低加载性能。

dns-prefetch 可帮助开发人员掩盖 DNS解析延迟。 HTML <link>元素 通过 dns-prefetch的 rel 属性值提供此功能。然后在 href属性中指要跨域的域名:

句法

<link rel="dns-prefetch" href="https://fonts.googleapis.com/"> 

例子

<html>
  <head>
    <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
    <!-- and all other head elements -->
  </head>
  <body>
    <!-- your page content -->
  </body>
</html>

每当站点引用跨域域上的资源时,都应在 <head> 元素中放置 dns-prefetch提示,但是要记住一些注意事项。

最佳实践

请记住以下三点:

首先,dns-prefetch 仅对跨域域上的 DNS查找有效,因此请避免使用它来指向您的站点或域。这是因为,到浏览器看到提示时,您站点域背后的IP已经被解析。

其次,还可以通过使用 HTTP链接字段dns-prefetch(以及其他资源提示)指定为 HTTP标头

Link: <https://fonts.gstatic.com/>; rel=dns-prefetch

第三,考虑将 dns-prefetchpreconnect(预连接)提示配对。尽管 dns-prefetch 仅执行 DNS查找,但preconnect 会建立与服务器的连接。如果站点是通过HTTPS服务的,则此过程包括DNS解析,建立TCP连接以及执行TLS握手。将两者结合起来可提供进一步减少跨域请求的感知延迟的机会。您可以安全地将它们一起使用,如下所示:

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

Note: 如果页面需要建立与许多第三方域的连接,则将它们预先连接会适得其反。 preconnect 提示最好仅用于最关键的连接。对于其他的,只需使用 <link rel="dns-prefetch"> 即可节省第一步的时间-DNS查找。

配对这些提示的逻辑是因为对dns-prefetch的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到dns-prefetch来获得更多好处。由于这是HTML功能,因此非常容错。如果不支持的浏览器遇到dns-prefetch提示(或任何其他资源提示),则您的网站不会中断。您只是不会获得它提供的好处。

一些资源(如字体)以匿名模式加载。在这种情况下,应使用预连接提示设置 crossorigin 属性。如果您省略它,则浏览器将仅执行DNS查找。

查看更多