#诞生背景
DNS请求虽然占用了很少的带宽,但会有很高的延迟,尤其以移动网络会更加明显。通过dns预解析技术可以很好的降低延迟
在firefox上使用dns-prefetch,dns预解析是与页面加载是并行处理的,且不用影响到页面加载的性能.
在以图片为主移动网站被访问时,在使用DNS预解析的情意中下,页面加载时间可以提升%5个点
一、什么是dns-prefetch?
DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。
目前每次DNS解析,通常在200ms以下。针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性。
二、如何设置dns-prefetch?
DNS Prefetch 应该尽量的放在网页的前面,推荐放在 <meta charset="UTF-8">
后面。具体使用方法如下:
<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//www.zhix.net"> <link rel="dns-prefetch" href="//api.share.zhix.net"> <link rel="dns-prefetch" href="//bdimg.share.zhix.net">
<link rel="dns-prefetch" href="http://renpengpeng.com" /> <!--如果不确定是http还是https连接的话建议如下写法 --> <link rel="dns-prefetch" href="//renpengpeng.com" />
三、DNS Prefetching预解析实现原理与注意事项
1.<meta>信息告诉浏览器,当前页面要做DNS预解析;
<meta http-equiv="x-dns-prefetch-control" content="on" />
2.使用<link>标签来强制对DNS预解析;
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
3.dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数;
4.浏览器对网站的首次域名DNS解析查找流程:浏览器缓存 -> 系统缓存 -> 路由器缓存 -> ISP -> DNS缓存 -> 递归搜索
5.如果要禁止隐式的DNS Prefetch,可以使用以下标签
<meta http-equiv="x-dns-prefetch-control" content="off">