概述

• DNS(Domain Name System, 域名系统)，是域名和IP地址相互映射的一个分布式数据库。DNS 查询就是将域名转换成 IP 的过程，这个过程短的话 2ms 几乎无感，长则可能达到几秒钟。
• 当浏览器访问一个域名的时候，需要解析一次DNS，获得对应域名的ip地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址

前端优化

DNS Prefetch，即DNS预解析就是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度

在前端优化中，关于DNS的有两点：一是减少DNS的请求次数，第二个就是进行DNS预先获取。

DNS Prefetch 已经被下面的浏览器支持

• Firefox: 3.5+
• Chrome: Supported
• Safari 5+
• Opera: Unknown
• IE: 9 (called “Pre-resolution” on blogs.msdn.com)

使用

现代浏览器在 DNS Prefetch 上做了两项工作：

1. html 源码下载完成后，会解析页面的包含链接的标签，提前查询对应的域名

2. 对于访问过的页面，浏览器会记录一份域名列表，当再次打开时，会在 html 下载的同时去解析 DNS

DNS预解析分为以下两种：

1. 默认情况下浏览器会对页面中和当前域名（正在浏览网页的域名）不在同一个域的域名进行预获取，并且缓存结果，这就是隐式的DNS Prefetch。如果想对页面中没有出现的域进行预获取，那么就要使用显示的DNS　Prefetch了，也就是使用link标签：

在页面添加如下标记

<link rel="dns-prefetch" href="//img.alicdn.com">

上面的link标签会让浏览器预取"img.alicdn.com"的解析
DNS Prefetch应该尽量的放在网页的前面，推荐放在<meta charset=”/>后面。

希望在HTTPS页面开启隐式的DNS Prefetch【自动解析】功能时，添加如下标记

<meta http-equiv="x-dns-prefetch-control" content="on">

希望在HTTP页面关闭隐式的DNS Prefetch【自动解析】功能时，添加如下标记

<meta http-equiv="x-dns-prefetch-control" content="off">

作用

DNS Prefetch有效缩短了DNS的解析时间

如果浏览器最近将一个域名解析为IP地址，所属的操作系统将会缓存，下一次DNS解析时间可以低至0-1ms。 如果结果不在系统本地缓存，则需要读取路由器的缓存，则解析时间的最小值大约为15ms。
如果路由器缓存也不存在，则需要读取ISP（运营商）DNS缓存，一般像taobao.com、baidu.com这些常见的域名，读取ISP（运营商）DNS缓存需要的时间在80-120ms.
如果是不常见的域名，平均需要200-300ms。一般的网站在运营商这里都能查询的到，所以普遍来说DNS Prefetch可以给一个域名的DNS解析过程带来15-300ms的提升，尤其是一些大量引用很多其他域名资源的网站，提升效果就更加明显了

浏览器底层缓存进行了建模，当Chrome浏览器启动的时候，就会自动的快速解析浏览器最近一次启动时记录的前10个域名。所以经常访问的网址就没有DNS解析的延迟，打开速度更快

最后

DNS Prefetch 是对网页性能优化的一个通用方案，对国际化的站点来说可能效果更加明显。学习成本和理解成本低，可以放心大胆地用到自己的网页上

以有赞商城为例

  <!-- DNS预解析  -->
  <link rel="dns-prefetch" href="https://dn-kdt-img.qbox.me/">
  <link rel="dns-prefetch" href="https://img.yzcdn.cn/">
  <link rel="dns-prefetch" href="https://b.yzcdn.cn/">
  <link rel="dns-prefetch" href="https://su.yzcdn.cn/">
  <link rel="dns-prefetch" href="https://h5.youzan.com/v2/">
  <link rel="dns-prefetch" href="https://h5.youzan.com/">

参考：
DNS预解析详解