前端性能优化之DNS Prefetch

二叶草 2020年2月3日22:37:22优化评论阅读模式

通俗的来说,每一个域名(网址)对应一个IP地址,而DNS就像一个电话号码簿,能够通过域名查询并转换成IP地址来进行访问。在我们谈论DNS Prefetch之前,我们需要明确DNS的工作原理,这样才能够更加清晰明白优化到底是优化了什么。

DNS域名空间结构

前端性能优化之DNS Prefetch

以访问http://zh.wikipedia.org/为例:

  1. DNS服务器向根域名服务器发送查询报文"query zh.wikipedia.org",根域名服务器返回顶级域 .org 的权威域名服务器地址。
  2. DNS服务器向 .org 域的权威域名服务器发送查询报文"query zh.wikipedia.org",得到二级域 .wikipedia.org 的权威域名服务器地址。
  3. DNS服务器向 .wikipedia.org 域的权威域名服务器发送查询报文"query zh.wikipedia.org",得到主机 zh 的A记录,存入自身缓存并返回给客户端。

DNS查询过程

前端性能优化之DNS Prefetch

  1. 当输入网址域名,操作系统会先检查本地hosts文件是否有这个域名对应的映射关系,如果有则调用对应IP,完成域名解析。
  2. 如果hosts中不存在域名映射,则查找本地DNS解析器缓存,有则完成域名解析。
  3. 如果hosts和本地DNS解析器缓存都没有映射关系,则会在TCP/IP配置的首选DNS服务器(本地DNS服务器),此服务器收到查询时,如果要查询的域名,包含在本地配置区域资源中,则返回解析结果给客户机,完成域名解析。
  4. 如果要查询的域名,不由本地DNS服务器区域解析,但该服务器已缓存了此网址映射关系,则调用这个IP地址映射。
  5. 如果本地DNS服务器本地区域文件与缓存解析都失效,则根据本地DNS服务器的设置(是否设置转发器)进行查询,如果未用转发模式,本地DNS就把请求发至根DNS,根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理,并会返回一个负责该顶级域名服务器的一个IP。
  6. 本地DNS服务器收到IP信息后,将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后,如果自己无法解析,它就会找一个管理.com域的下一级DNS服务器地址(http://qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后,就会找http://qq.com域服务器,重复上面的动作,进行查询,直至找到域名主机。
  7. 如果用的是转发模式,此DNS服务器就会把请求转发至上一级DNS服务器,由上一级服务器进行解析,上一级服务器如果不能解析,或找根DNS或把转请求转至上上级,以此循环。不管是本地DNS服务器用是转发,还是根提示,最后都是把结果返回给本地DNS服务器,由此DNS服务器再返回给客户机。

    从客户端到本地DNS服务器是属于递归查询,而DNS服务器之间就是的交互查询就是迭代查询。

DNS Prefetch原理

当我们访问一个域名的时候的时候,首先就需要把域名转化为对应的IP地址,DNS本身的解析是一个非常耗时的过程,如果访问过一次,我们可以从浏览器的DNS缓存当中直接读取。那么如何减少解析时间呢,我们可以使用DNS Prefetch(DNS 预解析)。

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

如何使用

首先让我们来看一下兼容性:

前端性能优化之DNS Prefetch

由此可以看出各个浏览器厂商早已支持这个特性了,所以,我们下一步就要知道如何开启DNS Prefetch:

  • 浏览器自动解析模式

    览器引擎在解析HTML页面的时候,会自动获取当前页面所有的a标签herf属性当中的域名,然后进行DNS Prefetch。(页面是HTTPS是不会开启自动解析)

    <meta http-equiv="x-dns-prefetch-control" content="on">

    如果不希望浏览器开启自动解析,则:content="off"

    手动解析模式

    直接添加link标签即可:

    <link rel="dns-prefetch" href="//www.qq.com"

总的来说依靠DNS Prefetch对常用域名进行提前解析,是能够大幅减少访问所要消耗的时间的,但是,由于DNS Prefetch是要占用带宽,所以,DNS Prefetch不是越多越好,设置常用的就行。

本文来源于:前端性能优化之DNS Prefetch-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
nginx解析漏洞 优化

nginx解析漏洞

phpstudy(小皮模板存在nginx解析漏洞) 影响版本 phptsuy8.1.07的Nginx1.5.11版本影响版本 phptsuy8.1.07的Nginx1.5.11版本 phpstudy介...
网站SEO优化基础流程(新手必看) 优化

网站SEO优化基础流程(新手必看)

宝塔面板搭建一个获取网站的Favicon图标的APIgetFavicon是一个可以获取网站的Favicon图标并显示在你的网页上的项目。安装方法很简单,属于开箱即食。这篇文章还是基于宝塔面板来搭建。 ...

发表评论