DNS预解析 dns-prefetch

1、DNS 是什么？

　　Domain Name System，域名系统，作为域名和IP地址相互映射的一个分布式数据库。

　　DNS大家都懂，那么浏览器访问域名的时候，是需要去解析一次DNS，也就是把域名 google.com解析到对应的ip地址上，修改本机hosts就是主动的影响DNS解析。
　　既然要解析就会损耗时间，对于前端特别是移动端而言，分秒必争，所以浏览器厂商-Chrome最想搞了这个新功能。
　　定义--浏览器根据自定义的规则，提前去解析后面可能用到的域名，来加速网站的访问速度。
　　DNS Prefetching的作用和原理就是提前解析域名，以免延迟。

2、如何使用 DNS Prefetching？

　　使用方式：

　　DNS Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。

　　//开始是为了适配 https 和 http 。就是当前请求链接是https ，那么这个//前面自动补充https ，反则补充http 。

3、DNS Prefetching的优势

　　DNS Prefetching是提前加载域名解析的，省去了解析时间。

　　a标签的href是可以在chrome、firefox包括高版本的IE，但是在HTTPS下面不起作用，需要meta来强制开启功能
　　这是DNS的提前解析，并不是css，js之类的文件缓存，大家不要混淆了两个不同的概念。
　　如果直接做了js的重定向，或者在服务端做了重定向，没有在link里面手动设置，是不起作用的。

　　这个对于什么样的网站更有作用呢--- 类似taobao这种网站，你的网页引用了大量很多其他域名的资源，如果你的网站，基本所有的资源都在你本域名下，那么这个基本没有什么作用。因为DNS Chrome在访问你的网站就帮你缓存了。

4、功能的有效性

　　如果本地就有缓存，那么解析大概是0~1ms,如果去路由器查找大概是15ms，如果当地的服务器，一些常见的域名可能需要150ms左右，不常见的可能要1S以上。

　　DNS解析的包很小，因为DNS是分层协议的，不需要跟http协议一样，一个UDP的包就ok，大概100bytes，快速。

　　本机的DNS缓存是有限，例如XP大概50到200个域名，所以Chrome这里做了优化，会根据你的网站访问频率，来保证你常用的网站的DNS都能被缓存住。

　　以下两个命令在chrome的地址栏输入查看:
　　　　"about:histograms/DNS" and "about:dns"

　　正确的使用方式：
　　1.对静态资源域名做手动dns prefetching。
　　2.对js里会发起的跳转、请求做手动dns prefetching。
　　3.不用对超链接做手动dns prefetching，因为chrome会自动做dns prefetching。
　　4.对重定向跳转的新域名做手动dns prefetching，比如：页面上有个A域名的链接，但访问A会重定向到B域名的链接，这么在当前页对B域名做手动dns prefetching是有意义的。

5、其他

　　1.假设页面Head里面有个css链接, 在当前页的Head里加上对应的手动dns prefetching的link标签，实际上并没有好处。

　　2.普遍来说合理的dns prefetching能对页面性能带来50ms ~ 300ms的提升，有人做了这方面的统计。

　　3.如chromium的官方文档所说，dns prefetching的网络消耗是极低极低的：
　　Each request typically involves sending a single UDP packet that is under 100 bytes out, and getting back a response that is around 100 bytes. This minimal impact on network usage is compensated by a significant improvement in user experience.

　　4.如chromium的官方文档所说，chrome使用8个线程专门做dns prefetching 而且chrome本身不做dns记录的cache，是直接从操作系统读dns --直接修改系统的dns记录或者host会直接影响chrome。

　　5.手动dns prefetching的代码实际上还是会增加html的代码量的，特别是域名多的情况下。
　　所以，最优的方案应该是：通过js初始化一个iframe异步加载一个页面，而这个页面里包含本站所有的需要手动dns prefetching的域名。

参考自：https://www.cnblogs.com/zdz8207/p/seo-DNS-Prefetching.html