DNS Prefetch初认识

今天在看一个后台框架时，发现这样的代码：

<link rel="dns-prefetch" href="//0.s3.envato.com">
<link rel="dns-prefetch" href="//thumb-tf.s3.envato.com" />
<link rel="dns-prefetch" href="//user-profile.s3.envato.com">
<link rel="dns-prefetch" href="//image-tf.s3.envato.com" />

赶紧搜索了一下，DNS Prefetch也就是DNS预获取，是前端DNS优化中的其中一点，另外一点嘛，就是减少DNS查询的次数。

浏览器支持情况：

  • Firefox: 3.5+
  • Chrome: Supported
  • Safari 5+
  • Opera: Unknown
  • IE: 9 (called “Pre-resolution” on blogs.msdn.com)

默认情况下浏览器会对页面中和当前域名（正在浏览网页的域名）不在同一个域的域名进行预获取，并且缓存结果，这就是隐式的DNS Prefetch。如果想对页面中没有出现的域进行预获取，那么就要使用显示的DNS　Prefetch了，也就是使用link标签。

下面我们来简单了解一下dns-prefetch：

DNS 作为互联网的基础协议，其解析的速度似乎容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析耗费20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。

浏览器对网站第一次的域名DNS解析查找流程依次为：

浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索

Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性，由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置，所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。

预解析的实现：

1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />

2. 在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

另外引一篇写的很好的文章

http://www.cnblogs.com/suyuwen1/p/5506397.html；

时间： 2024-08-07 21:17:13

DNS Prefetch初认识的相关文章

DNS Prefetch

DNS 实现域名到IP的映射.通过域名访问站点,每次请求都要做DNS解析.目前每次DNS解析,通常在200ms以下.针对DNS解析耗时问题,一些浏览器通过DNS Prefetch 来提高访问的流畅性. 什么是 DNS Prefetch ? DNS Prefetch 是一种DNS 预解析技术,当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行DNS的解析,减少用户等待时间,提高用户体验. 目前支持 DNS Prefetch 的浏览器有 goog

关于DNS Prefetch

DNS Prefetch是一种DNS预解析技术,也是前端优化的一部分.当我们在浏览网页时,浏览器会在加载网页时,对网页中的域名进行解析缓存,这样在我们点击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验. 设置方式: 如果要浏览器端对特定的域名进行解析,通过以下两种方式实现: 1.通过 link 标签实现,例如:< link rel="dns-prefetch" href="http://demo.com" /> 2.通过 m

DNS预解析prefetch

本文将详细介绍DNS预解析prefetch的主要内容 原文出处:https://www.cnblogs.com/xiaohuochai/p/9185622.html 概述 DNS(Domain Name System, 域名系统),是域名和IP地址相互映射的一个分布式数据库.DNS 查询就是将域名转换成 IP 的过程,这个过程短的话 2ms 几乎无感,长则可能达到几秒钟 当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址.在解析过程中,按照浏览器缓存.系统缓存.路由器缓存.I

详解HTML5中rel属性的prefetch预加载功能使用

在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了. 举个例子说明:比如要预先加载某个页面,可以这样: XML/HTML Code <link rel="prefetch" href="http://www.example.com/"> <!-- Firefox --> 但如果是googl

分析DNS解析时间

提高网页的打开速度,一般地我们会选择使用CDN,利用“就近原则”让用户在最短的时间内获取到服务器资源,实际应用当中采用CDN的方式提高网站访问速度的效果也是最明显的.这也就是为什么国外的空间打开速度远不及国内的主机的访问速度的原因了. 我们知道在用户访问网站时先得经过域名DNS解析这一过程,可能很多人对于DNS解析时间平常并没有太在意.性能稳定.响应时间快的DNS域名 解析服务与不稳定.响应过慢的DNS的域名解析时间可能相差1秒,而对于网站存在过多的域名解析请求,这个时间积累起来就非常地多了.

dns-prefetch—DNS预解析技术

今天在看一个网站的源代码时 发现了 <link rel="dns-prefetch" href="//static.tuweia.cn/"> 对dns-prefetch有点儿好奇,因为不止一次地见到,今天终于忍不住要看看他到底是什么技术? 下面是在网上找到的一篇关于dns-prefetch的简述. DNS 实现域名到IP的映射.通过域名访问站点,每次请求都要做DNS解析.目前每次DNS解析,通常在200ms以下.针对DNS解析耗时问题,一些浏览器通过DN

HTML5 prefetch即预加载

原文地址 声明:此文带着自己的理解,不完全按原文翻译 prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕. 有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清空了缓存 缓存可能已经过期,资源将重新加载 用户访问的缓存文件可能不是最新的,需要重新加载 Chrome 的预加载技术 现在的 chrome 聪明到根据你的浏览记录,预测到你可能访问或搜索哪些网站,在你打开网站之前就加载好了一些资源了.举个栗子,当你在搜索框输入 "amaz" 时

减少域名DNS解析时间将网页加载速度提升新层次-DNS缓存/预读取/拆分域名

我们知道在用户访问网站时先得经过域名DNS解析这一过程,可能很多人对于DNS解析时间平常并没有太在意.性能稳定.响应时间快的DNS域名解析服务与不稳定.响应过慢的DNS的域名解析时间可能相差1秒,而对于网站存在过多的域名解析请求,这个时间积累起来就非常地多了. 本篇文章就来分享一下通过优化网站DNS域名解析,减少域名DNS解析时间,从而让网站在原来的访问速度的前提下继续实现新的飞跃.想要了解更多的有关于网站和服务器优化加速的方法,可以试试: 1.加快SSL:Nginx和Apache上安装SPDY

DNS预解析 dns-prefetch

1.DNS 是什么? Domain Name System,域名系统,作为域名和IP地址相互映射的一个分布式数据库. DNS大家都懂,那么浏览器访问域名的时候,是需要去解析一次DNS,也就是把域名 google.com解析到对应的ip地址上,修改本机hosts就是主动的影响DNS解析. 既然要解析就会损耗时间,对于前端特别是移动端而言,分秒必争,所以浏览器厂商-Chrome最想搞了这个新功能. 定义--浏览器根据自定义的规则,提前去解析后面可能用到的域名,来加速网站的访问速度. DNS Pref