<link rel=”dns-prefetch” href=”http://a0.twimg.com”/>
<link rel=”dns-prefetch” href=”http://a1.twimg.com”/>
<link rel=”dns-prefetch” href=”http://a2.twimg.com”/>
<link rel=”dns-prefetch” href=”http://a3.twimg.com”/>
<link rel=”dns-prefetch” href=”http://api.twitter.com”/>
查阅了相关资料,知道DNS Prefetch也就是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。如果想对页面中没有出现的域进行预获取,那么就要使用显示的DNS Prefetch了,也就是使用link标签:
<link rel=”dns-prefetch” href=”http://api.twitter.com”/>
DNS Prefetch应该尽量的放在网页的前面,推荐放在<meta charset=”/>后面。
PS:可以通过下面的标签禁止隐式的DNS Prefetch。
<meta http-equiv=”x-dns-prefetch-control” content=”off”>
在网页体验中我们常会遇到这种情况,即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢?
一般来说这种延时的原因不会是对方网站带宽或者负载的原因,那么到底是什么导致了这种情况呢。湛蓝试着进行推测,假设是DNS的问题,因为DNS解析速度很可能是造成资源延时的最大原因。于是湛蓝在页面header中添加了以下代码(用以DNS预解析):
效果很不错(测试浏览器为IE8),再打开其他页面时百度分享按钮的加载明显提高!
下面我们来简单了解一下dns-prefetch:
浏览器对网站第一次的域名DNS解析查找流程依次为:
浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索
Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性,由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置,所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。
预解析的实现:
注:dns-prefetch需慎用,多页面重复DNS预解析会增加重复DNS查询次数。
PS:DNS预解析主要是用于网站前端页面优化,在SEO中的作用湛蓝还未作验证,但作为增强用户体验的一部分rel="dns-prefetch"或许值得大家慢慢发现。
参考文章:百度泛用户体验-浏览器的加载与页面性能优化 http://www.baiduux.com/blog/2011/02/15/browser-loading/