摘要：深入首先借助万能的谷歌，找到的文档，学习这种事情最好就是找到官方的东西才能原汁原味，以下是个人对文档的一些理解。而不仅会加载资源，还会解执行页面，进行预渲染，但是这都是根据浏览器自身进行判断。
开始
今天突然心血来潮想起前端性能优化的问题，这基本是老生常谈的事情了，面试随便都能说上几个，但是还是有点疑问：就是Head标签了，记忆中Head可是藏龙卧虎，各种技能都有，当然这些不可能都一一记住，太伤脑细胞了，于是打开神奇的Github，来到这个 HEAD项目,翻一翻就会看到今天的主角dns-prefetch，preconnect，prefetch和prerender兄弟了，究竟他们有何区别，是怎样的一家人尼。
深入首先借助万能的谷歌，找到W3C的文档，学习这种事情最好就是找到官方的东西才能原汁原味，以下是个人对文档的一些理解。
dns-prefetch其实意思也很容易理解，dns-prefetch就是一项使浏览器主动去执行域名解析的功能。
一般的形式就是这样：
href属性值就是需要DNS预解析的host
preconnet浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。
而一般形式就是
浏览器会进行以下步骤：
解释href的属性值，如果是合法的URL，然后继续判断URL的协议是否是http或者https否则就结束处理
如果当前页面host不同于href属性中的host,crossorigin其实被设置为anonymous(就是不带cookie了)，如果希望带上cookie等信息可以加上crossorign属性,corssorign就等同于设置为use-credentials
prefetch能够让浏览器预加载一个资源（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等等也是可以预加载到缓存里面。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51219.html
摘要：当然并不是所有的页面需要用到的外部域名都需要做这样的域名解析，浏览器默认会解析超链接属性的里面的域名，并且你的网站域名还不能是，如果是，则需要设置请求头或加入一段强制开启域名解析的标签。 废话：异步加载和预加载一直都是前端优化必备技能之一，今天我们就来深度解析一下常用的几个关键点。 异步加载 废话不多说，任何长篇大论的教程都抵不过一张清晰明了的高清大图来得好： showImg(http...
摘要：当然并不是所有的页面需要用到的外部域名都需要做这样的域名解析，浏览器默认会解析超链接属性的里面的域名，并且你的网站域名还不能是，如果是，则需要设置请求头或加入一段强制开启域名解析的标签。 废话：异步加载和预加载一直都是前端优化必备技能之一，今天我们就来深度解析一下常用的几个关键点。 异步加载 废话不多说，任何长篇大论的教程都抵不过一张清晰明了的高清大图来得好： showImg(http...
摘要：最常见的用法，是用来链接一个外部的样式表，比如标签还能做一些其他的事情，来帮助我们提高页面性能。可以帮助我们提高页面的性能。 写在前面 本文首发于公众号：符合预期的CoyPan HTML 中元素规定了外部资源与当前文档的关系。最常见的用法，是用来链接一个外部的样式表，比如： link标签还能做一些其他的事情，来帮助我们提高页面性能。 link标签的使用 来看一下link标签除了链接外...
摘要：最常见的用法，是用来链接一个外部的样式表，比如标签还能做一些其他的事情，来帮助我们提高页面性能。可以帮助我们提高页面的性能。 写在前面 本文首发于公众号：符合预期的CoyPan HTML 中元素规定了外部资源与当前文档的关系。最常见的用法，是用来链接一个外部的样式表，比如： link标签还能做一些其他的事情，来帮助我们提高页面性能。 link标签的使用 来看一下link标签除了链接外...
阅读 3629·2021-10-11 10:58
阅读 2230·2021-10-08 10:05
阅读 1909·2021-09-27 13:34
阅读 3522·2019-08-30 15:53
阅读 2707·2019-08-30 14:02
阅读 3514·2019-08-29 16:55
阅读 599·2019-08-29 15:41
阅读 1030·2019-08-29 15:23
