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 。
<link rel="dns-prefetch" href="[//host_name_to_prefetch.com](http://the_worlds_best_vendor.com/)">
实例:
<link rel="dns-prefetch" href="//www.gome.com.cn/">
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