WonderCSS

通过 link 语句实现 DNS 预取

或许你知道,在做资源站或大容量网站时,出于让浏览器能并行的下载更多资源,你可以由不同的域名(或二级域名)提供服务。如果说,浏览器只能一次从一个域名获取两个资源,那么由两个域名提供服务意味着它可以一次性获取四个资源;三个域名意味着六个并行下载。

出于这个原因,你会看到很多网站内引用的图片都是“外站”资源。比如花瓣网站中的图片地址并非是 http://www.huaban.com 下而是http://img.hb.aicdn.com 域名下的图片。

这里的问题是 DNS查询 牵涉到了第三方域名,由于DNS查询代价很高,所以我们需要一个又快又简单的办法来加速这个过程:DNS预取。


<head>
<link rel="dns-prefetch" href="//widget.wondercss.com">
</head>

在<head>间插入的这行简单内容,将会告诉支持的浏览器去开始预取那个域名的DNS,这要稍稍早于它实际需要的时刻。它意味着DNS查询过程,在浏览器渲染、应用widget.wondercss.com资源前就已经在进行了。这仅仅给浏览器增加了一个很小的开头,但却是网页优化中很重要的一个开端!

By 于湛 发布于 2013.04.19 1,618 次浏览

发表评论

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