前端性能优化之DNS

前端性能优化之DNS：

前言

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

减少dns域名解析：

阻挡：解决方案-提高浏览器的并发连接数

由于不同的浏览器对于单个域名的最大的并发连接数有一定的限制，一般来说，浏览器的限制是4-8个，ie6在http/1.0，并发数为4个，在http/1.1，并发数是2个。如果浏览器对一个域名发送太多请求，超过了最大限制就会出现等待。
解决方案：我们可以对某些URL的域名分散处理，比如将当前页面所需的图片分散到不同的域名上去，网页的打开速度会得到明显的提升。类似css和js也可以采用该方式。

cookies隔离

对于淘宝网站你会看到一个现象，淘宝请求图片会有 img.alicdn.com 这样的域名，明显的可以看到这个地址用了cdn加速，但是这次的关注点不在与cdn加速。而是在于为什么淘宝不用img.taobao.com来加载图片的静态资源呢？
这个原因点在于cookies，由于淘宝的cookie已经非常大了，据说曾接近1K，如果用后面的域名，那每次请求图片都会带上长长的cookie，后果可想而知，不仅使得网络请求变慢，而且还浪费了带宽，而淘宝图片服务器并不需要这些cookie。这就是所说的cookie污染，为了解决这一问题，单独的域名是很有必要的。

DNS预解析的方案

首先我们先普及一下DNS解析的基本知识：
dns预解析是浏览器试图在用户访问链接之前解析域名，这个是计算机的正常DNS解析机制。域名解析后，如果用户确实访问该域名，那么DNS解析就不会延迟。典型的一次DNS解析会耗费20-120毫秒，所以减少DNS解析时间和次数是个很好的优化方式。
DNS预获取，一般来说，在前端DNS优化中的两种方式：一是减少DNS的请求次数(别意是减少http请求)，二是进行DNS预获取。

DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能 减少用户的等待时间，提升用户体验 。
浏览器对网站第一次的域名DNS解析查找流程依次为：浏览器缓存——系统缓存——路由器缓存——ISP DNS缓存——递归搜索

其使用场景：
当DNS预解析在某一个页面中包含非常多的域名，比如搜索结果页

我们可以查看淘宝、网易网站是如何减少dns的域名解析
举个栗子：
淘宝加载图片，采用了DNS域名预解析方案，我们可以查看淘宝官网可以看到：
淘宝：


网易：

从上图可以看出，淘宝和网易采用了dns预加载的方案，通过在meta标签后面添加<link rel=“dns-prefetch” href=“”>，一般来说，使用该标签之前，首先需要通过meta标签来告知浏览器，当前的页面需要进行DNS解析<meta http-equiv = “x-dns-prefetch-control” content=“on”>。但是Chrome和firefox 3.5+内置了DNS Prefetching技术并对DNS预解析做了相应的优化设置，所以，不设置该属性，他们也可以自动在后台进行DNS预解析。

总结

前端性能之路还需要自我去积累，还有很长的路要走。