关于rel=dns-prefetch的介绍

什么是 rel=dns-prefetch?

  • 通过预先载入DNS记录来提速网页加载速度

使用范例

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

代码示意

  • rel部分,告诉浏览器准备好要解析一个域名
  • href部分,告诉浏览器要解析的域名为84361749.com
  • //,忽略解析时使用的协议

目的

如果需要加载很多不同域名下的资源,比如加载bootstrap时需要预先载入的不同域名下的资源,可以通过这个方法提速。
同时可以在 pagespeed 的测试中,获得较高分值,对于搜索引擎优化非常有帮助。

W3C中的定义

"The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent should resolve as early as possible."

在何处使用

请将这段代码放置于 HTML 的 <head> 标签内

DNS解析

在网页加载的过程中,是一定会需要解析不同的域名的。
如果你有加载三个不同域名下的资源,就会三次DNS查询;如果有十个不同域名的资源,就需要十次DNS查询。
所以在<head>标签中提前预载DNS就像预定义变量一样,是一个非常好的习惯。

什么时候不需要使用DNS预载?

如果你所有的资源文件都在同一个域名下。当用户请求该页面的时候,浏览器已经解析过域名了,所有需要加载的JS,CSS,以及图片文件都在同一个域名下,所以没必要为自己的域名做预载。非得强制预载的话,反而会让浏览器再做一次解析,增加了页面的加载时间和效率。

什么时候需要使用DNS预载?

现在,如果你有大量的第三方插件和资源,比如各种广告JS,前端框架等需要通过非自己域名进行加载。
基于当前前端框架的流行,加载大量第三方资源逐渐成为常态。而与此同时,尽管浏览器在加载第三方资源的时候,是并行的。浏览器会先解析哪个域名下的资源不是按照代码中的顺序进行,有些需要提前加载的资源也许会因为DNS解析慢,而导致后续加载的代码无法执行或者样式出错。
所以DNS预载可以有效提升页面的加载速度,以及让页面加载效果更符合预期。

提前规划是个好习惯

在使用DNS预载前,我们还可以通过一下几个步骤来进一步优化页面加载速度

  • 我的页面中有哪些资源是在第三方域名上的
    先检查自己可以控制的部分,比如自定义的CSS,JS和图片,尽可能保持在同一个域名下。

如果是框架或者插件中的资源,可以通过 Pagespeed 工具检查完,获取所有需要加载的域名信息,通过本篇内容进行优化

  • 自有资源的域名是否一致
    这里主要讲的是二级域名,尽管在同一个域名下,但是不同的二级域名依然需要经过DNS解析。

需要注意的是 84361739.com 和 www.84361749.com 尽管内容完全一致,但却是两个不同的二级域名。
同样的原理,适用于 http 和 https 两种协议的url。

  • 进阶优化-找出当前冗余的资源
    对于极致的优化,尤其是对于访问量较大的单页,可以进一步分析哪些需要加载的资源是这个页面上用不到的,然后从代码中移除。这招对于部署在第三方域名上的资源优化,尤其有效果。

发表新评论