开始今天突然想到前端性能优化的问题。头部被标记。在我的记忆中，海德是藏龙卧虎。它有各种各样的技能。当然，不可能记住所有这些。太伤脑筋了。于是我打开了神奇的Github，来到了这个HEAD项目上，查了一下。今天的主角dns-prefetch、preconnect、prefetch和prerender兄弟，他们之间有什么区别，又是怎样的一家。深入先用万能的Google找W3C文档。学习这种东西，最好的办法就是找官方的东西做正品。以下是个人对文档的一些理解。其实dns-prefetch的意思也很好理解。dns-prefetch是一种让浏览器主动进行域名解析的功能。一般形式是这样的：href属性值是需要DNS预解析的hostpreconnet浏览器建立连接，一般需要去通过DNS查找，TCP三次握手和TLS协商（如果是https），这些过程是相当耗时的，所以preconnet是一个让浏览器提前建立连接，真正需要的时候可以直接请求的项目加载资源。一般形式为浏览器将执行以下步骤：href属性值，如果是合法的URL，则继续判断该URL的协议是http还是https；否则，结束处理。如果当前页面的host和href属性中的host不一样，crossorigin其实是设置为anonymous（即不带cookies），如果想带cookies等信息，可以加上crossorign属性，crossorign是相当于设置use-credentialsprefetch让浏览器预加载一个资源（HTML、JS、CSS或图片等），让用户跳转到其他页面，响应速度更快。一般形式是虽然预加载了，但是不会解析页面或者直接执行js。Prerender和prerender不仅会加载资源，还会执行页面，进行预渲染，不过这都是根据浏览器本身来判断的。浏览器可能会分配少量资源来预渲染页面，暂停一些请求直到页面可见，如果消耗了太多资源，则可能会放弃预渲染，等等。..一般形式pr属性dns-prefetch，preconnect，prefetch和prerender都支持一个pr属性（取值范围0.0到1.0)，就是让浏览器决定先加载哪些资源。毕竟浏览器内部有一个可用的连接池。当资源紧张时，只能加载优先级高的资源。总结一句话：当然是为了性能，为了更好的用户体验。dns-prefetch和preconnect的存在可以让浏览器在解析文档的同时进行DNS解析或者预先建立一个链接，然后更加快速的加载CDN的其他资源（我猜的，其实文档上并没有说浏览实施者应该在那个阶段完成，只是说越早越好）。因为DNS解析和TCP三次握手都比较耗时，当然还有其他的手段可以在其他方面比如持久链接，多路复用等方面进行优化。不一定要为每个请求都建立一个新的链接，但是有必要建立一个链接。无法优化消耗。因此，在解析文档的同时做好这些事情，可以在一定程度上优化页面的整体加载速度。prefetch和prerender可以告诉浏览器用户下一个重定向页面的地址，浏览器可以将这些页面资源预加载到缓存或预渲染中，用户将在几秒钟内体验到页面（是不是很酷），的当然不一定是页面，也可以将图片、js和css等其他资源预加载到缓存中。
