dns-prefetch

unimof 2021年07月10日 749次浏览

1. 原理

域名访问时需要通过 DNS 查询对应的服务器 IP 地址,第一次访问过程如下:

浏览器缓存 -> 系统缓存 -> 路由器缓存 -> ISP -> DNS缓存 -> 递归搜素

通过 标签加入 dns-prefetch ,可以先将 需要的域名 DNS 信息查询保存到页面,后续使用不需要再次查询,从而加快页面资源加载速度。

据测算,加入 dns-prefetch ,可以加快图片资源 5% 左右的访问速度。

2. 使用

DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。
目前每次DNS解析,通常在200ms以下。针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性。

Dns请求虽然占用了很少的带宽,但会有很高的延迟,由其以移动网络会更加明显。通过dns预解析技术可以很好的降低延迟

在firefox上使用dns-prefetch,dns预解析是与页面加载是并行处理的,且不用影响到页面加载的性能。

DNS Prefetch 应该尽量的放在网页的前面,推荐放在 后面。具体使用方法如下:

<!-- 告诉浏览器打开 dns-prefetch 特性,当前页面要做DNS预解析 -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<!-- 标签来强制对DNS预解析 -->
<link rel="dns-prefetch" href="http://fm.ipinyou.com">

<!--如果不确定是http还是https连接的话建议如下写法 -->
<link rel="dns-prefetch" href="//hm.baidu.com">

3. 影响

dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数