DNS Prefetch
DNS(Domain Name System)，翻译为域名解析系统，是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。
DNS更加通俗易懂的理解可以把它当做一个电话薄，根据你在浏览器地址栏当中输入的域名地址返回给你对应的IP地址，然后你可以根据IP地址再进行访问。
对应到前端这里基于DNS能做哪些优化呢？这里引出了我们今天的主角DNS Prefetch。
DNS Prefetch原理
当我们访问 www.baidu.com/ 的时候，首先就需要把域名转化为对应的IP地址，DNS本身的解析是一个非常耗时的过程，如果访问过一次，我们可以从浏览器的DNS缓存当中直接读取。那么如何减少解析时间呢，我们可以使用DNS Prefetch(DNS 预解析)。
打开DNS Prefetch之后，浏览器会在空闲时间提前将这些域名转化为对应的IP地址，这里为了防止DNS Prefetch阻塞页面渲染影响用户体验。
使用
各个浏览器厂商很早就支持这个特性了，包括Firefox 3.5+、IE9+、Chrome等，所以我们可以放心的在我们的项目当中使用这个特性了。
只需要添加如下link标签即可：
<link rel="dns-prefetch" href="//www.baidu.com">
一般我们都是在整个站点的首页设置好DNS Prefetch，这么做的原因一个是基于站点用到的大多数域名都会在首页当中出现，另外一个原因是我们可以把其他子页面用到的比较频繁的域名也可以放到首页进行预解析。
使用比较频繁的域名这里一般是指存放图片资源的服务器域名和一些经常发送Ajax请求会用到的域名
打开自己熟知的互联网公司的网站，几乎所有网站都用到了DNS Prefetch，这里以慕课网为例，如下图：
DNS Prefetch通过提前解析我们用到的一些常见域名，大大减少了实际访问时所花费的时间，是一个非常好的解决方案，而且如果你所在的公司有国际化的业务，合理地运用DNS Prefetch相信可以带来不错的效果 。
资源预加载
页面资源预加载(Link prefetch)是浏览器提供的一个技巧，目的是让浏览器在空闲时间下载或预读取一些文档资源，用户在将来将会访问这些资源。一个 Web 页面可以对浏览器设置一系列的预加载指示，当浏览器加载完当前页面后，它会在后台静悄悄的加载指定的文档，并把它们存储在缓存里。当用户访问到这些预加载的文档后，浏览器能快速的从缓存里提取给用户。
简单来说就是在当前页面加载完成后或者其它空闲时间，我们可以加载下面页面会用到的资源。具体的使用方法如下：
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
在这里，我们预加载了 CSS 和 JavaScript 文件。所以在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。这个例子本身可能有些平淡，但预加载的好处可以更清晰直观地得到展示，在随后的渲染过程中，这些资源得到有效使用。对于更大的文件来说也是如此。 例如那些在 CSS 文件中指向的资源，比如字体或是图片；再比如更大的图片和视频文件，我们都可以提前进行预加载。
