有关前端性能优化—DNS解析优化的方法？

回忆哆啦没有A梦

已于 2022-07-29 09:37:30 修改

阅读量2.6k

点赞数 1

分类专栏：性能优化文章标签：前端性能优化服务器

于 2022-07-28 18:35:51 首次发布

本文链接：https://blog.csdn.net/weixin_39550080/article/details/126040498

版权

性能优化专栏收录该内容

4 篇文章 0 订阅

订阅专栏

DNS简介与域名解析

DNS全称为Domain Name System，即域名系统，是域名和IP地址相互映射的一个分布式数据库。

域名系统DNS将主机名映射到IP地址，就像电话簿将人们的姓名映射到他们的电话号码中，在浏览器中输入https://www.baidu.com/时，浏览器联系的DNS解析器将返回该服务器的IP地址，DNS有成本，DNS通常需要20-120毫秒来查找给定主机名的IP地址，在DNS查找完成之前，浏览器无法从该主机名下载任何内容。

这其中很大的好处就是在域名之后可以绑定多个IP地址来进行资源均衡，而且当你通过域名提供服务时，可以随时更新已绑定的IP地址(当然没事不会更改IP地址，而且域名还有TTL时效) ，而不用动应用服务。

即，域名解析即通过主机名，最终得到该主机名对应的IP地址的过程

Tip：
可以通过访问百度域名：https://www.baidu.com/访问百度
也可以通过访问百度IP：202.108.22.5 来访问百度

浏览器对网站第一次的域名DNS解析查找流程依次为：
浏览器缓存 - 系统缓存 - 路由器缓存 - ISP DNS缓存 - 递归搜索

DNS解析优化的主要方法

减少DNS的请求查询次数（前端）
进行DNS预获取：DNS Prefetch（前端）
延长DNS缓存时间（运维）
使用CDN加速域名（运维）

减少DNS的请求查询次数（前端优化点）

DNS查询也消耗响应时间，若网页内容来自各个不同的domain，则客户端首次解析这些domain需要消耗一定的时间，但由于DNS查询结果会缓存在本地系统和浏览器中一段时间，所以DNS查询一般只是对首次访问时的速度有影响。

进行DNS预获取：DNS Prefetch（前端优化点）

DNS Prefetching简介:

DNS请求需要的带宽非常小，但是延迟却有点高，这点在手机网络上特别明显，而一次典型的DNS解析一般需要20-200ms，所以DNS预解析可以让延迟明显减少一些。

在某些浏览器中这个预读取的行为将会与页面实际内容并行发生（而不是串行）。正因如此，某些高延迟的域名的解析过程才不会卡住资源的加载。
这样可以极大的加速（尤其是移动网络环境下）页面的加载。在某些图片较多的页面中，在发起图片加载请求之前预先把域名解析好将会有至少 5%的图片加载速度提升。

DNS-prefetch（DNS预获取）是尝试在请求资源之前解析域名，这可能是后面要加载的文件，也可能是用户尝试打开的链接目标。域名解析和内容载入时串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。
DNS-prefetch可以帮助开发人员掩盖DNS解析延迟。HTML的link元素通过dns-prefetch的rel属性值提供此功能，然后再href属性中指要跨域的域名。

如何设置dns-prefetch？
X-DNS-Prefetch-Control头控制着浏览器的DNS预解析功能
X-DNS_prefetch-Control: on|off
on：启用DNS预解析。在浏览器支持DNS预解析的特性时及时不适用该标签浏览器依然会进行预解析。
off：关闭DNS预解析。这个属性在页面上的链接并不是由你控制的或是你根本不想向这些域名引导数据时非常有用。
DNS Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。具体使用方法如下：

// 打开和关闭DNS预读取
<meta http-equiv="x-dns-prefetch-control" content="on">
// 强制查询特定主机名
<link rel="dns-prefetch" href="https://www.baidu.com">
<link rel="dns-prefetch" href="https://blog.csdn.net">

每当站点引用跨域资源的时候，都应在head元素中放置dns-prefetch提示，但是要记住下面的注意事项。

dns-prefetch仅对跨域的DNS查找有效。
dns-prefetch要谨慎使用，多页面重复DNS预解析会增加DNS查询次数。
默认情况下浏览器会对页面中和当前域名不在同一个域的域名进行预获取，并且缓存结果，这就是隐式的dns-prefetch。如果想对页面中没有出现的域进行获取，那么就要使用显示的dns-prefetch了。
虽然使用dns-prefetch能够加快页面的解析速度，但是也不能滥用，因为有开发者指出禁用DNS预获取能节省每月100亿的DNS查询。