DNS预解析dns-prefetch提高页面载入速度优化前端性能

　　当浏览器请求一个URL的时候，经过firebug咱们能够发现大概有如下几个过程：阻挡、域名解析、创建链接、发送请求、等待响应、接收数据。后面四个跟用户的网络状况和你的服务器处理速度有关，本文重点说说前两个。

一、阻挡：解决方案——提升浏览器并发链接数

　　阻挡：不一样的浏览器对单个域名的最大并发链接数有必定的限制，HTTP/1.0和HTTP/1.1也不相同。好比HTTP/1.1协议下，IE6的并发链接数限制是2个；而在HTTP/1.0下，IE6的并发链接数能够达到4个。在其它浏览器也有相似的限制，通常是4~8个。这个时候，若是浏览器同时对某一域名发起多个请求，超过了限制就会出现等待，也就是阻挡。

　　那么为了解决阻挡这一问题，咱们能够对某些URL的域名分散处理，好比咱们的图片域名，通常用相似img.guoweiwei.com的域名，当一个页面包含20多张图片的时候，那至少有10几个请求会被阻挡，而若是咱们分散到img0.guoweiwei.com/img1.guoweiwei.com/img2.guoweiwei.com/…等不一样域名的时候，至少这20个图片请求会并发进行，网站打开速度会明显提高不少。相似的，能够对一些css/js的域名一样处理。

二、域名解析：解决方案——DNS预解析

　　域名解析：从域名查询IP的过程，这个过程通常都很快的，但也会引发延迟。通常浏览器会适当的对解析结果缓存，并对页面中出现的新域名进行预解析，但并非全部的浏览器都会这么作，为了帮助其它浏览器对某些域名进行预解析，你能够在页面的html标签中添加dns-prefetch告诉浏览器对指定域名预解析，以下：

<link rel="dns-prefetch" href="//domain.com">

　　若是细心一点，你会在淘宝的网站发现这两个现象，淘宝有不少相似img0.tbcdn.cn这样的域名。

　　再另外提一点优化，

三、cookie隔离

　　那就是为何用img0.tbcdn.cn这个域名，而不是img0.taobao.com呢？这个得从cookie提及，淘宝的cookie已经很是大了，听说曾接近1K，若是用后面的域名，那每次请求图片都会带上长长的cookie，后果可想而知，不只使得网络请求变慢，并且还浪费了带宽，而淘宝图片服务器并不须要这些cookie。这就是所说的cookie污染，为了解决这一问题，单独的域名是颇有必要的。

　　下面重点介绍下：

四、DNS预解析解决方案

　　DNS预解析是浏览器试图在用户访问连接以前解析域名，这是计算机的正常DNS解析机制。

　　域名解析后，若是用户确实访问该域名，那么DNS解析时间将不会有延迟。

　　最明显的例子，DNS预解析在某个页面中包含很是多的域名很是有效，如搜索结果页。遇到网页中的超连接，DNS prefetching从中提取域名并将其解析为IP地址，这些工做在用户浏览网页时，使用最少的CPU和网络在后台进行解析。当用户点击这些已经预解析的域名，能够平均减小200毫秒耗时（假设用户最近还未访问过该域名），更重要的是用户不会遇到DNS解析最坏的状况（每每超过1秒）。

　　DNS Prefetch，即DNS预获取，是前端优化的一部分。通常来讲，在前端优化中与 DNS 有关的有两点：

　　一个是减小DNS的请求次数，

　　另外一个就是进行DNS预获取 。

　　DNS 做为互联网的基础协议，其解析的速度彷佛很容易被网站优化人员忽视。如今大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析须要耗费 20-120 毫秒，减小DNS解析时间和次数是个很好的优化方式。

　　DNS Prefetching 是让具备此属性的域名不须要用户点击连接就在后台解析，而域名解析和内容载入是串行的网络操做，因此这个方式能 减小用户的等待时间，提高用户体验 。

　　浏览器对网站第一次的域名DNS解析查找流程依次为：浏览器缓存——系统缓存——路由器缓存——ISP DNS缓存——递归搜索

　　默认状况下浏览器会对页面中和当前域名（正在浏览网页的域名）不在同一个域的域名进行预获取，而且缓存结果，这就是隐式的 DNS Prefetch。若是想对页面中没有出现的域进行预获取，那么就要使用显示的 DNS Prefetch 了。

　　目前大多数浏览器已经支持此属性，支持版本以下：

• – 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="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">

　　预解析的实现：

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

　　二、在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="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">