什么是DNS预解析？dns-prefetch真的可以提升网站的速度吗?

知道“dns-prefetch”预解析源于几年前在知乎上看到的一篇文章，这篇文章把“dns-prefetch”预解析的效果说的很玄，后来也没有怎么关注，毕竟那时候才刚刚出来这个东西，而前几天自己偶然发现国内的一些知名网站都已经开始开始添加dns-prefetch标签了，比如淘宝、支付宝、网易、京东这些大站都有添加这个标签，所以今天就来说一说什么是DNS预解析？dns-prefetch真的可以提升页面的速度吗？

一、什么是DNS prefetch预解析？

我们都知道，在我们上网时向浏览器输入一个网址（域名，URL地址）后，首先会进行DNS解析为对应的 IP 地址，DNS解析是一个漫长的过程，虽然随着科技的进步，我们的网速已经得到了很大的提升，但是正常的DNS解析流程还是没有变化，都是需要经过解析后再返回对应的一个页面和数据展示给我们。

而DNS prefetch的原理就是，当我们开启了DNS prefetch后，浏览器在空闲时间会提前把这些域名转换为对应的IP地址，缓存到系统缓存中，从而缩短DNS解析花费的时间，提高访问网站的速度。

DNS 缓存查询机制：解析之前会查询缓存试得到 IP 地址，查询缓存的顺序为：浏览器缓存 ——> hosts系统缓存 ——> 路由器缓存 ——> ISP（互联网服务提供商）DNS缓存，如果没有缓存就继续递归查询 ——> 根域名服务器 ——> 顶级域名服务器 ——> 主域名服务器 ——> 保存结果至缓存；如果提前设置了 DNS 缓存，那么也减少了查询的步骤。

二、如何给自己的网站添加DNS prefetch预解析？

通过前面的说明，大家应该都知道DNS prefetch预解析确实能够提升网站的页面载入速度，那么如何给自己的网站添加DNS prefetch预解析呢？

首先我们来看一个已经添加了DNS prefetch预解析的网站的代码是如何部署的，这里以淘宝网为例。

不知道大家发现没有，在使用dns-prefetch预解析的时候，链接不是通用的那种，而是网站内部链接，比如淘宝的CDN图片链接，所以如果说“dns-prefetch”真的有效果，那么也是使用自己的资源作为预加载，而不是照抄直接复制粘贴就可以的。就上图淘宝网的dns-prefetch设置图片所示，你直接复制过来后，你的网站资源根本不涉及淘宝或者京东的图片，那么这就是个鸡肋的操作。

我这里简单总结了几个常用的资源链接，我们就以这些比较常见的资源链接来说明一下给自己网站部署DNS Prefetch预解析的方法。

首先，DNS Prefetch 应该尽量的放在网页的前面，具体使用方法如下：

<link rel=”dns-prefetch” href=”//bdimg.share.baidu.com” />
<link rel=”dns-prefetch” href=”//cdn.staticfile.org” />
<link rel=”dns-prefetch” href=”//hm.baidu.com” />

以上代码的作用就是在页面header中使用link标签来对DNS预解析：

<link rel=”dns-prefetch” href=”预解析链接” />

以上仅仅是案例，我们还可以添加阿里云图标，百度和谷歌联盟代码等等。有些资源链接可能存在http和https的区别，如果不确定是http还是https连接的话建议采用如上代码。

三、如何不漏掉域名？

现在大家的网站采用的公共库资源还是比较多的，还有各种图床之类的，那么在添加DNS Prefetch预解析的时候如何不漏掉域名呢？

01、借助开发者工具，查看所有静态资源域名，并添加link标签，手动解析如果是HTTPS网页，考虑是否需要对超链接自动解析，如果需要，添加对应的meta标签。

02、检查js中发起的跳转至其他域名的情况，对于这些域名，添加link标签，手动解析。

03、检查是否存在重定向的域名，对于重定向的域名，将重定向之后的域名。

04、添加link标签，手动解析。

这这里说明一下，并非所有页面都要手动解析，一般在整个站点的入口页做这个工作就行了，毕竟一个站点下用到的大多数域名都会在首页体现。

四、如何开启或者关闭DNS Prefetch预解析？

希望在HTTPS页面开启自动解析功能时，添加如下标记：

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

希望在HTTP页面关闭自动解析功能时，添加如下标记：

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

五、DNS prefetch会影响SEO吗？

经过我几个网站较长时间的对比验证，发现DNS Prefetch并不会对网站在SEO方面有什么影响，但是按照常理推断，一个网站的打开速度越快，是有利于搜索引擎蜘蛛爬行的，DNS预解析主要是用于网站前端页面优化，而且作为增强用户体验的一部分，DNS prefetch或许是值得大家去发掘的。