今天翻看twitter的源码的时候看到了一下内容:
<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 Prefetching)
网站优化技术总是在进化。今天重新阅读了一下以前的前端优化笔记,发现对于 YSlow 优化 34 条准则关于减少 DNS 查找 (Reduce DNS Lookups)的部分或许应该修正一下了。
DNS 作为互联网的基础协议,其解析的速度似乎容易被网站优化人员忽视。现在浏览器厂商已经有在针对 DNS 进行优化,典型的一次 DNS 解析耗费 20-120 毫秒,减少 DNS 解析数是个优化的方式,而能够缩减 DNS 解析的时间也是有经济效益的事情。这就是浏览器厂商重视 DNS Prefetching 的主要原因。DNS Prefetching 对于性能的收益可以简单的用”DNS 同步请求到异步”来解释,也就是具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入是串行的网络操作,所以这个方式能减少用户的等待时间,提升用户体验。
Google Chrome 内置就有 DNS Prefetching 技术(注意之前有几个小版本因为这一特性反而带来了性能问题) ,而 Firefox 3.5 也引入了这一 新特性。至于 IE 8,暂时还看不到有什么举措(或许是我没注意到?)。
对于一个网站来说,如果希望能充分利用用户浏览器端的这个功能,可以在页面添加 link 属性的锚点来做到。类似:
<link rel="dns-prefetch" href="http://www.google-analytics.com/">
另外还有这个 x-dns-prefetch-control 也有必要适当用一下。对于某些站点引用了 Google 的某些服务脚本,可能这尤其有用。
另外一种加速 DNS 的途径是考虑使用 pdnsd 之类的缓存 DNS 代理服务器来加速某些 DNS 请求。
在 Chrome 中,可以通过在地址栏输入 about:histograms/DNS 来观测一些有趣的 DNS 性能数据。