使用 dns-prefetch
DNS-prefetch 是在请求资源之前尝试解析域名。这可能是一个稍后加载的文件或用户尝试访问的链接目标。
为什么要使用 dns-prefetch？
当浏览器向（第三方）服务器请求资源时，在浏览器能够发出请求之前，该跨域的域名必须解析为 IP 地址。这个过程称为 DNS 解析。虽然 DNS 缓存可以帮助减少这种延迟，但 DNS 解析可能会显著增加请求的延迟。对于需要打开许多第三方连接的网站，这种延迟会严重影响加载性能。
dns-prefetch 帮助开发者缓解 DNS 解析延迟。通过将 HTML <link> 元素的 rel 属性设置为 dns-prefetch，可以实现此功能。跨域域名随后在 href 属性中指定。
语法
<link rel="dns-prefetch" href="https://fonts.googleapis.ac.cn/" />
示例
<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.ac.cn/" />
<!-- and all other head elements -->
</head>
<body>
<!-- your page content -->
</body>
</html>
每当您的网站引用来自跨域域名的资源时，都应将 dns-prefetch 提示放在 <head> 元素中，但有一些注意事项。
最佳实践
有 3 个主要注意事项
首先，dns-prefetch 仅对跨域域名的 DNS 查询有效，因此请避免将其用于指向您自己的网站或域名。这是因为当浏览器看到该提示时，您网站背后的 IP 实际上已经解析完毕。
其次，还可以通过使用 HTTP Link 字段，将 dns-prefetch（及其他资源提示）指定为HTTP 标头。
Link: <https://fonts.googleapis.ac.cn/>; rel=dns-prefetch
第三，虽然 dns-prefetch 只执行 DNS 查询，但 preconnect 会建立到服务器的连接。此过程包括 DNS 解析、建立 TCP 连接以及执行 TLS 握手（如果网站通过 HTTPS 提供服务）。使用 preconnect 有机会进一步减少跨域请求的可感知延迟。您可以通过使用 HTTP Link 字段将其作为HTTP 标头使用。
Link: <https://fonts.googleapis.ac.cn/>; rel=preconnect
或通过 HTML <link> 元素使用。
<link rel="preconnect" href="https://fonts.googleapis.ac.cn/" crossorigin />
注意：如果页面需要连接到许多第三方域名，预连接所有这些域名会适得其反。preconnect 提示最好只用于最关键的连接。对于其他连接，只需使用 <link rel="dns-prefetch"> 来节省第一步——DNS 查询的时间。
将这些提示配对的逻辑是，dns-prefetch 的支持比 preconnect 更普遍。不支持 preconnect 的浏览器通过回退到 dns-prefetch 仍然可以获得一些额外的好处。由于这是一个 HTML 功能，它非常健壮。如果不支持的浏览器遇到 dns-prefetch 提示（或其他资源提示），您的网站不会中断。您只是无法获得它提供的优势。
某些资源（如字体）以匿名模式加载。在这种情况下，您应该为 preconnect 提示设置 crossorigin 属性。如果省略，浏览器将只执行 DNS 查询。