DNS Prefetch初认识

Posted 2020-09-05 卢沟晓月前端之路

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

<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；