HTML 前端的 link 标签中 dns-prefetch 是什么?

教程与解决方案问答分类: 计算机相关HTML 前端的 link 标签中 dns-prefetch 是什么?
0
DNS 提问于 2月 以前

<head>
<link rel=”dns-prefetch” href=”域名”>
</head>

1 个回答
0
Fuyeor MaruguMarugu Fuyeor 管理员 回答于 2月 以前
  • dns-prefetch:DNS预获取

DNS预获取是前端优化网站速度的一部分。在网页体验中我们常会遇到调用当前网页所在域名外的域名(例如 CDN 加速域名)下的文件时会遇到解析请求延时非常严重的情况。减少 DNS 解析时间和次数是个很好的优化方式,因此我们一般使用 dns-prefetch:DNS预获取 标签解决这个问题。

  • 什么是 DNS Prefetch

DNS(域名系统)系统是实现域名到 IP 地址的映射。通过域名访问站点,每次请求都要做 DNS 解析。目前每次 DNS 解析,通常在200ms以下。针对 DNS 解析耗时问题,现在浏览器通过 DNS Prefetch 来提高访问的流畅性。DNS Prefetch 是一种 DNS 预解析技术,当浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。可以在页面中添加 link标签实现。DNS Prefetch 应该尽量的放在网页 Head 标签靠前的位置,推荐放在 <meta charset=”UTF-8″> 标签的后面,例如:

<meta charset="UTF-8">

<link rel="dns-prefetch" href="//resource.fuyeor.com" />
  • 最佳实践

请记住以下三点:

首先,dns-prefetch 仅对跨域(非页面的域名)上的 DNS 查找有效,因此请避免使用它来指向本域名。这是因为,到浏览器看到提示时,你的站点域名的 IP 已经被解析过了。

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

<link rel="dns-prefetch" href="https//resource.fuyeor.com" />

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

<link rel="preconnect" href="https://resource.fuyeor.com/" crossorigin>

<link rel="dns-prefetch" href="https://resource.fuyeor.com/">

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

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

你的回答

13 + 20 =