谈谈你对 dns-prefetch 的理解

[CodeRookie262]

No description provided.

[yuki-mirai]

知识盲区，特地bd了一下。其实从释义中也能看出来了：DNS预获取，那么跟xx预加载的作用肯定也是类似的，无非是为了加快资源的获取速度，提升用户体验。

我觉得这跟系统中的hosts文件是类似的，但还是有区别，预加载的特点在于：动态、缓存，而hosts却是静态的，它无法从网络动态获取并更新映射内容；浏览器会优先从hosts中获取域名ip映射，从而减少已知ip的域名仍要访问域名服务器带来的时间及带宽成本。

总的来说，使用DNS Prefetch的优势是显而易见的，相较于频繁的访问DNS带来的用户体检下降，能利用缓存机制让一段时间内访问DNS的频率大幅下降

[CodeRookie262]

@Mirai39 优秀，说到点了，主要就是为了提前加载域名，省去了解析的时间👍👍

[yuki-mirai]

@Mirai39 优秀，说到点了，主要就是为了提前加载域名，省去了解析的时间👍👍

乱说的，等标准答案，哈哈😄

[CodeRookie262]

@Mirai39 我就是个搬运工而已哈哈，没有标准答案的说话，况且都被你说完了(;ﾟ∀ﾟ)=3ﾊｧﾊｧ

[yuki-mirai]

@CodeRookie262 也是，标准答案都是CV，期待你的见解（＞人＜；）

[CodeRookie262]

我打算 CV 你的 (￣∇￣)

[yuki-mirai]

我打算 CV 你的 (￣∇￣)

别了吧，CV（声优，此处做动词）我？我这抠脚大汉的声音？(●'◡'●)

[CodeRookie262]

知识盲区，特地bd了一下。其实从释义中也能看出来了：DNS预获取，那么跟xx预加载的作用肯定也是类似的，无非是为了加快资源的获取速度，提升用户体验。

我觉得这跟系统中的hosts文件是类似的，但还是有区别，预加载的特点在于：动态、缓存，而hosts却是静态的，它无法从网络动态获取并更新映射内容；浏览器会优先从hosts中获取域名ip映射，从而减少已知ip的域名仍要访问域名服务器带来的时间及带宽成本。

总的来说，使用DNS Prefetch的优势是显而易见的，相较于频繁的访问DNS带来的用户体检下降，能利用缓存机制让一段时间内访问DNS的频率大幅下降

在此基础上在增加几个小点哈。

dns-prefetch 是第三方资源请求时，对其域名提前进行域名解析，省去了请求前的 dns 解析的时间,dns解析可以减少请求是解析域名对应的ip带来的延迟，提升资源加载性能。

可以通过 <link rel="dns-prefetch" href="//coderookie262.com"> 标签进行设置dns预解析，不过浏览器会对 a 标签中的 href 默认开启 dns-prefetching 功能，这样就无须在 head 中手动设置 dns-prefetch 了，但是如果的href域名指向是基于https协议的话默认启动就不起作用了，需要在head中增加<meta http-equiv="x-dns-prefetch-control" content="on">来强制启用。

注意：

1. dns-prefetch 只是提前对 dns 解析，和缓存css，js这些文件是不一样的；
2. 还有就是如果页面或者服务端做了服务端处理的前提下如果没有在head中对重定向的域做dns-prefetch的话并不会提前进行 dns 解析；
3. 如果请求的资源都是当前域时，没有必要设置 dns 预解析，因为你在访问这个网站的时候浏览器就已经帮你解析并缓存起来了。