***DNS(Domain Name System)***,翻译为域名解析系统,是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。

围绕DNS可做的性能优化非常的多,比如大家所熟知的全局负载均衡(GSLB),用户可以访问到离自己最近服务器,从而获得最优的访问体验,这项优化更多需要服务端去完成。前端主要关注 DNS Prefetch

# DNS Prefetch原理

当浏览器访问一个域名的时候,需要解析一次DNS,获得对应域名的ip地址。在解析过程中,按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序,逐步读取缓存,直到拿到IP地址。

DNS Prefetch,即DNS预解析就是根据浏览器定义的规则,提前解析之后可能会用到的域名,使解析结果缓存到系统缓存中,缩短DNS解析时间,来提高网站的访问速度。

如果页面之前访问了,我们可以从浏览器的DNS缓存当中直接读取。减少了解析时间,以及请求次数。

打开DNS Prefetch之后,浏览器会在空闲时间提前将这些域名转化为对应的IP地址,这里为了防止DNS Prefetch阻塞页面渲染影响用户体验,Chrome浏览器的引擎并没有使用它的网络堆栈去进行预解析,而是单独开了8个完全异步的Worker线程专门负责DNS Prefetch。所以很多人认为的DNS Prefetch会影响首屏加载其实是错误的,两者并没有任何关系,所以我们可以大胆放心的使用DNS Prefetch。

# 如何使用

# 浏览器自动解析

浏览器引擎在解析HTML页面的时候,会自动获取当前页面所有的a标签herf属性当中的域名,然后进行 DNS Prefetch。这个解析过程是与用户浏览网页并行处理的。但是为了确保安全性,在HTTPS页面中没有开启 DNS Prefetch

// 开启DNS Prefetch
<meta http-equiv="x-dns-prefetch-control" content="on">

// 关闭DNS Prefetch
<meta http-equiv="x-dns-prefetch-control" content="off">

# 手动解析

<link rel="dns-prefetch" href="//jkfhto.github.io">
DNS Prefetch解析后的域名对应关系会缓存到本地,一般本地缓存的数量为50~200个

# 正确的使用姿势

  • 在整个站点的入口声明DNS预解析。通过在站点入口声明了后续其他子页面和子站点可能会访问的域名,浏览器提前进行了DNS预解析。这样用户在访问其他子站点的时候将会间接受益于入口的预解析,降低了DNS lookup所消耗的时间。
  • 根据实际情况配置当前页面的DNS预解析。声明后续操作可能会用到的域名,如发送的异步请求、动态加载图片等等。
  • 并不是DNS prefetch设置的越多越好,虽然是异步线程,实际上还是占用设备的带宽,造成资源竞争。
  • 借助开发者工具,对静态资源域名做手动dns prefetching。
  • 如果是HTTPS网页,考虑是否需要对超链接自动解析,如果需要,添加对应的meta标签。
  • 检查js中发起的跳转至其他域名的情况,对于这些域名,做手动dns prefetching。
  • 对重定向跳转的新域名做手动dns prefetching。比如:页面上有个A域名的链接,但访问A会重定向到B域名的链接,这么在当前页对B域名做手动dns prefetching是有意义的。

# 解决的问题及收益

DNS Prefetch有效缩短了DNS的解析时间。

如果浏览器最近将一个域名解析为IP地址,所属的操作系统将会缓存,下一次DNS解析时间可以低至0-1ms。 如果结果不在系统本地缓存,则需要读取路由器的缓存,则解析时间的最小值大约为15ms。如果路由器缓存也不存在,则需要读取ISP(运营商)DNS缓存,一般像taobao.com、baidu.com这些常见的域名,读取ISP(运营商)DNS缓存需要的时间在80-120ms,如果是不常见的域名,平均需要200-300ms。一般的网站在运营商这里都能查询的到,所以普遍来说DNS Prefetch可以给一个域名的DNS解析过程带来15-300ms的提升,尤其是一些大量引用很多其他域名资源的网站,提升效果就更加明显了。 Chromium对底层缓存进行了建模,当Chrome浏览器启动的时候,就会自动的快速解析浏览器最近一次启动时记录的前10个域名。所以你经常访问的网址就没有DNS解析的延迟,打开速度更快。

# 参考

更新时间: 5/13/2020, 11:23:00 PM