前端性能优化之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”>。但是Chromefirefox 3.5+内置了DNS Prefetching技术并对DNS预解析做了相应的优化设置,所以,不设置该属性,他们也可以自动在后台进行DNS预解析。

总结

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


本文由 Abert 创作,采用 知识共享署名 4.0 国际许可协议。

本站文章除注明转载/出处外,均为本站原创或翻译,转载请务必署名。