前端性能优化之DNS Prefetch

DNS Prefetch，即DNS预读取。rel = dns-prefetch存在的主要原因是为了加快网页在为页面资源使用不同域时加载的方式。它可以通过有效控制DNS查找时间发生的方式来实现页速增益。此过程通常称为“DNS预读取”。
那么什么是DNS Prefetch：

• DNS 是什么– Domain Name System，域名系统，作为域名和IP地址相互映射的一个分布式数据库。
• DNS大家都懂，那么浏览器访问域名的时候，是需要去解析一次DNS，也就是把域名google.com解析到对应的ip地址上。解析DNS就会损耗一部分时间，对于前端特别是移动端而言，分秒必争，这个时间大家也想省去，所以浏览器厂商搞了这个新功能。
• 定义–浏览器根据自定义的规则，提前去解析后面可能用到的域名，来加速网站的访问速度。

使用 DNS Prefetching

DNS Prefetching用在在HTML文档的头。推荐放在 后面。

<link rel ="dns-prefetch" href ="https://cdn.varvy.com">

上面的代码的意思是：

• 我想在调用之前解析域名
• 域名是“cdn.varvy.com”

DNS 预读取哪里有用？

假设你的CDN上有一大堆js文件用于你的页面加载，你还有一些第三方的东西从另一个域调用js。实际上，您可能不知道浏览器会在这种情况下首先尝试加载哪些内容。
但你知道的是，你肯定会使用你的CDN，而不是首先使用哪个文件。在这种情况下，DNS预取是完美的，因为所有rel = dns-prefetch正在解析DNS，而不是实际抓取文件。这意味着无论浏览器首先获得什么实际文件，它都已经解析了DNS，因此可以更快地检索资源。
DNS 预读取基本上可以通过“提示”浏览器的操作来更好地控制页面的加载方式，而不是让它有机会。

DNS 预读取在哪里没用？

如果您的所有页面资源都来自与html相同的域；如果浏览器已经解析了该域的DNS；如果您的所有图像和脚本以及CSS都来自同一个域；那么自然不需要再次解析该域。

关闭 DNS 预读取

在文档中使用值为 http-equiv 的 标签：

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

这样就关闭了 DNS 预读取