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等等也是可以预加载到缓存里面。

1 篇内容引用

Keep it simple.

560 声望
194 粉丝
0 条评论
推荐阅读
HTTP Security
HTTP SecurityHTTP CSP3目标减少内容注入攻击的风险,包括: 1) 嵌入文档的资源(worker/iframe) 2)内联脚本 3)动态脚本(eval) 4) 内联样式提供能力控制嵌入资源可以使用哪些源(origin)提供一个report机...

tain335阅读 365

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.7k评论 1

封面图
23个css动画效果,持续更新中...
代码github仓库:[链接]使用方式看名称效果图,有没有和自己想要的效果类似的有的话,复制粘贴代码使用也可以自己修改一下css效果并不是特别难,只是有时候我们可能想不到笔者空闲时间,会继续更新的哦,点赞关注...

水冗水孚9阅读 1.3k

封面图
两行CSS让页面提升了近7倍渲染性能!
对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者来...

南玖9阅读 2k

封面图
你可能不知道的dialog弹窗
想必大家都知道 HTML5 中有 dialog 这样一个标签,顾名思义,就是“弹窗”。除了有良好的语义外,随着浏览器的不断更新迭代,还出现了许多你可能不知道的特性,快速了解一下吧~

XboxYan8阅读 488

封面图
那些你不知道的 CSS 自定义形状网格布局 3
基于CSS自定义网格已发布第一部分和第二部分,本文将开始第三部分探讨更多的奇特自定义形状,与之前的文章一样,核心还是基于CSS grid,clip 和 mask来自定义网格形状布局。

南城FE6阅读 1.3k

封面图

Keep it simple.

560 声望
194 粉丝
宣传栏