Head标签里面的dns-prefetch，preconnect，prefetch和prerender

开始

今天忽然心血来潮想起前端性能优化的问题，这基本是老生常谈的事情了，面试随便都能说上几个，可是仍是有点疑问：就是Head标签了，记忆中Head但是藏龙卧虎，各类技能都有，固然这些不可能都一一记住，太伤脑细胞了，因而打开神奇的Github，来到这个 HEAD项目,翻一翻就会看到今天的主角dns-prefetch，preconnect，prefetch和prerender兄弟了，究竟他们有何区别，是怎样的一家人尼。

深刻

首先借助万能的谷歌，找到W3C的文档，学习这种事情最好就是找到官方的东西才能原汁原味，如下是我的对文档的一些理解。

dns-prefetch

其实意思也很容易理解，dns-prefetch就是一项使浏览器主动去执行域名解析的功能。
通常的形式就是这样：

<link rel="dns-prefetch" href="//example.com">

href属性值就是须要DNS预解析的host

preconnet

浏览器要创建一个链接，通常须要通过DNS查找，TCP三次握手和TLS协商（若是是https的话），这些过程都是须要至关的耗时的，因此preconnet，就是一项使浏览器可以预先创建一个链接，等真正须要加载资源的时候就可以直接请求了。
而通常形式就是

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

浏览器会进行如下步骤：

• 解释href的属性值，若是是合法的URL，而后继续判断URL的协议是不是http或者https不然就结束处理
• 若是当前页面host不一样于href属性中的host,crossorigin其实被设置为anonymous(就是不带cookie了)，若是但愿带上cookie等信息能够加上crossorign属性,corssorign就等同于设置为use-credentials

prefetch

可以让浏览器预加载一个资源（HTML，JS，CSS或者图片等），可让用户跳转到其余页面时，响应速度更快。
通常形式就是

<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

虽然是预加载了，可是页面是不会解析或者JS是不会直接执行的。

prerender

而prerender不只会加载资源，还会解执行页面，进行预渲染，可是这都是根据浏览器自身进行判断。
浏览器可能会

• 分配少许资源对页面进行预渲染
• 挂起部分请求直至页面可见时
• 可能会放弃预渲染，若是消耗资源过多
  等等状况。。。

通常形式

<link rel="prerender" href="//example.com/next-page.html">

pr属性

dns-prefetch，preconnect，prefetch和prerender都支持一个pr属性（0.0到1.0范围的值），就是让浏览器可以判断优先加载那些资源，毕竟浏览器内部是有可用的链接池的，资源紧张的状况下只能加载优先级更高的资源。

总结

一句话：固然就是为了性能和更好用户体验了。dns-prefetch和preconnect的存在可让浏览器在解析文档的同时能够预先进行DNS解析或者预先创建一个连接，接下来加载CDN的其余资源时就能够更加快速（我猜的，其实文档并无说浏览器应该在那个阶段进行，只是说尽量早）。由于DNS解析和TCP三次握手都是至关消耗时间，固然也有其余手段去在其余方面去优化例如持久连接和多路复用，不用每次请求都创建创建一个新的连接，可是创建一个连接所必要的消耗是优化不了。因此在解析文档的同时作好这些事情，页面总体加载速度能够有必定程度上的优化。prefetch和prerender能够告诉浏览器用户下个跳转的页面的地址，浏览器能够预加载这些页面资源到缓存或者预渲染好，用户就之后体验页面秒开（是否是很爽），固然了不必定是页面，其余资源例如图片，js和css等等也是能够预加载到缓存里面。