dns-prefetch是什么 前端优化:DNS预解析提升页面速度(3)

　　目前大多数浏览器已经支持此属性，支持版本如下：
•– Safari: 5+
•– Chrome: All
•– Firefox: 3.5+
•– Opera: Unknown
•– IE: 9+ (called “Pre-resolution” on blogs.msdn.com)

　　其中 Chrome 和 Firefox 3.5+ 内置了 DNS Prefetching 技术并对DNS预解析做了相应优化设置。所以，即使不设置此属性，Chrome 和 Firefox 3.5+ 也能自动在后台进行预解析 。

　　目前很多大型站点也应用了这一优化，例如：

　　淘宝、支付宝、网易
 

DNS Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。具体使用方法如下：

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href=http://www.jb51.net/web/"/www.zhix.net">
<link rel="dns-prefetch" href=http://www.jb51.net/web/"/api.share.zhix.net">
<link rel="dns-prefetch" href=http://www.jb51.net/web/"/bdimg.share.zhix.net">

　　预解析的实现：

　　1、用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />

　　2、在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href=http://www.jb51.net/web/"http:/bdimg.share.baidu.com" />

　　注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

　　需要注意的是，虽然使用 DNS Prefetch 能够加快页面的解析速度，但是也不能滥用，因为有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询 。

　　如果需要禁止隐式的 DNS Prefetch，可以使用以下的标签：

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

PS：DNS预解析主要是用于网站前端页面优化，在SEO中的作用湛蓝还未作验证，但作为增强用户体验的一部分rel="dns-prefetch"或许值得大家慢慢发现。

（编辑：ASP站长网）