前端优化DNS预解析

写在前面
今天再看一同事写的代码，发现了这样<link rel="dns-prefetch" href="//hm.baidu.com">这个代码，很好奇查了一下才知道，dns-prefetch链接关系类型用于指示将用于获取所需资源的源，并且用户代理应该尽可能早地解析，可以提高网页的载入速度。

背景

在前端优化中与 DNS 的有关一般有两点： 一个是减少DNS的请求次数，另一个就是进行DNS预获取 。DNS作为互联网的基础协议，往往容易被网站优化人员忽略。

DNS与域名解析

DNS全称为Domain Name System，即域名系统，是域名和IP地址相互映射的一个分布式数据库。
域名解析即通过主机名，最终得到该主机名对应的IP地址的过程。
浏览器对网站第一次的域名DNS解析查找流程依次为：
浏览器缓存 - 系统缓存 - 路由器缓存 - ISP DNS缓存 - 递归搜索

解决方案

DNS预解析是浏览器试图在用户访问链接之前解析域名，这是计算机的正常DNS解析机制。
域名解析后，如果用户确实访问该域名，那么DNS解析时间将不会有延迟。
遇到网页中的超链接，DNS prefetching从中提取域名并将其解析为IP地址，这些工作在用户浏览网页时，使用最少的CPU和网络在后台进行解析。
当用户点击这些已经预解析的域名，可以平均减少200毫秒耗时（假设用户最近还未访问过该域名）。

DNS Prefetching简介

DNS请求需要的带宽非常小，但是延迟却有点高，这点在手机网络上特别明显，而一次典型的DNS解析一般需要20-200ms，所以DNS预解析可以让延迟明显减少一些。
在某些浏览器中这个预读取的行为将会与页面实际内容并行发生（而不是串行）。正因如此，某些高延迟的域名的解析过程才不会卡住资源的加载。
这样可以极大的加速（尤其是移动网络环境下）页面的加载。在某些图片较多的页面中，在发起图片加载请求之前预先把域名解析好将会有至少 5% 的图片加载速度提升。

使用

X-DNS-Prefetch-Control头控制着浏览器的DNS预解析功能
X-DNS_prefetch-Control: on|off
on：启用DNS预解析。在浏览器支持DNS预解析的特性时及时不适用该标签浏览器依然会进行预解析。
off：关闭DNS预解析。这个属性在页面上的链接并不是由你控制的或是你根本不想向这些域名引导数据时非常有用。

浏览器支持

 

dns-prefetch.png

示例

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

链接：https://www.jianshu.com/p/8fe17253f728