YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Reduce DNS Lookups

前端性能优化:Reduce DNS Lookups

今天要介绍的YSlow的前端性能优化规则是 Reduce DNS Lookups(减少DNS查找)。那么,为什么要减少DNS查找?

DNS查找过多的影响

YSlow给了我们很明确的解释说明:

The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people’s names to their phone numbers. When you type www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server’s IP address. DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname. The browser can’t download anything from this hostname until the DNS lookup is completed.

有些网络常识的朋友都知道 Internet 是通过IP地址来查找服务器的。由于IP地址很难记忆,我们用容易记的域名替代了IP地址。但是当我们在浏览器输入某个域名时,浏览器会将域名转换成IP地址查找网站服务器的位置,这个解析过程就是我们说的DNS(Domain Name System)解析。所以DNS解析是有开销的,将域名解析成IP地址的DNS解析时间大约在20-120毫秒之间。而在这个解析转换完成前,浏览器是不会从服务器下载任何内容的。

所以,过多的DNS查找会就就意味着浏览器会花更多的时间来做DNS解析,DNS开销越多,页面打开自然就越慢。直接所DNS查找可能有点不太好懂,简单的说就是网页内有过多的来自不同域名的元素,有很多不同域名的URL地址。例如sina.com.cn首页就有过多的DNS查找,我们看看下面的截图:

新浪网首页 Reduce DNS lookups 评分

(以下为个人观点)顺便说一下,虽然新浪的这种处理其实是使用了以后要介绍的Use cookie-free domains方法,但做得有些过了,使用了太多的DNS查找。这么多服务器维护的成本也不低啊。

多少DNS查找才合适

接下来你肯定会问了:多少DNS查找才合适?

My guideline is to split these components across at least two but no more than four hostnames.

至少2个,最多不超过4个。服务器太少,1个也不好。因为在前面介绍 《Make fewer HTTP requests》中提到过,Web服务器每秒钟的响应请求的能力是有限的,如果将整站的所有元素的请求都集中在一个服务器上,负荷过高,服务器的响应速度会变慢,当然更甚的就会死机。太多了,DNS 查找带来的开销会过大,反而会得不偿失。

所以,我们需要通过2-4个服务器来分担并发请求的压力,就可以让浏览器同时并发下载更多的页面元素,让页面可以更快的加以呈现,给用户更好的浏览体验。既不能太少,也不要太多。

关于DNS缓存

在《High Performance Web Sites》一书和YSlow的文档中都提到了DNS缓存,介绍的基本都是DNS缓存对前端性能的影响。(IE,Firefox)浏览器有自己的DNS缓存,用户的系统终端也会有自己的系统DNS缓存。DNS缓存就是为了减少DNS查找,而减少DNS查找就意味着我们可以获得更好的前端性能。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Reduce DNS Lookups

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)