使用 dns-prefetch

DNS-prefetch 尝试在请求资源之前解析域名。这可能是稍后加载的文件，也可能是用户尝试访问的链接目标。

为什么要使用 dns-prefetch？

当浏览器从（第三方）服务器请求资源时，必须将该 跨域 的域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少这种延迟，但 DNS 解析可能会给请求增加明显的延迟。对于连接到许多第三方的网站，这种延迟会显著降低加载性能。

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

语法

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

示例

html
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
    <!-- and all other head elements -->
  </head>
  <body>
    <!-- your page content -->
  </body>
</html>

只要你的网站引用了跨域域名的资源，你都应该将 dns-prefetch 提示放置在 <head> 元素 中，但有一些事项需要注意。

最佳实践

需要注意 3 个主要事项

首先，dns-prefetch 仅对 跨域 域名的 DNS 查找有效，因此请避免使用它指向你的网站或域名。这是因为，浏览器看到提示时，你网站域名背后的 IP 地址已经解析过了。

其次，还可以通过 HTTP 头部 指定 dns-prefetch（以及其他资源提示），方法是使用 HTTP Link 字段

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

第三，虽然 dns-prefetch 仅执行 DNS 查找，但 preconnect 建立与服务器的连接。此过程包括 DNS 解析，以及建立 TCP 连接和执行 TLS 握手（如果网站通过 HTTPS 提供服务）。使用 preconnect 提供了进一步减少 跨域请求 感知延迟的机会。你可以通过 HTTP 头部 使用 HTTP Link 字段 来使用它

http
Link: <https://fonts.googleapis.com/>; rel=preconnect

或通过 HTML <link> 元素

html
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />

注意：如果页面需要与多个第三方域名建立连接，则预先连接所有域名会适得其反。 preconnect 提示最适合用于最关键的连接。对于其他连接，只需使用 <link rel="dns-prefetch"> 来节省第一步（DNS 查找）的时间。

将这些提示配对背后的逻辑是，dns-prefetch 的支持比 preconnect 的支持更好。不支持 preconnect 的浏览器仍将通过回退到 dns-prefetch 而获得一些额外的好处。由于这是一个 HTML 功能，因此它非常容错。如果一个不支持的浏览器遇到 dns-prefetch 提示（或任何其他资源提示），你的网站不会崩溃。你只是不会收到它带来的好处。

某些资源（如字体）在匿名模式下加载。在这种情况下，你应该在 preconnect 提示中设置 crossorigin 属性。如果你省略它，浏览器只会执行 DNS 查找。

另请参阅