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等等也是可以预加载到缓存里面。
本文转载于:猿2048➝https://www.mk2048.com/blog/blog.php?id=haiicck1abb
Head标签里面的dns-prefetch,preconnect,prefetch和prerender的更多相关文章
- 用js动态的改变img标签里面的src属性实现图片的循环切换
JS:根据循环切换的条件可以用 document.getElementById('').src=''设置, 或者jquery方法: $('#id').attr('src','图片名称’): 具体: i ...
- javascript正则找script标签, link标签里面的src或者 href属性
1. [代码]javascript 简单的search <script(?:(?:\s|.)+?)src=[\"\'](.+?)[\"\'](?!\<)(?:(? ...
- php 正则表达式怎么匹配标签里面的style?
$str = '<div style="margin:0px;text-align:left;padding:0px;">任意内容</div>'; $reg ...
- DNS预解析prefetch
前面的话 本文将详细介绍DNS预解析prefetch的主要内容 概述 DNS(Domain Name System, 域名系统),是域名和IP地址相互映射的一个分布式数据库.DNS 查询就是将域名转换 ...
- prefetch vs preload vs prerender vs preconnect All In One
prefetch vs preload vs prerender vs preconnect All In One 前端性能优化 prefetch 预获取 https://developer.mozi ...
- dede文章调用时过滤调 body里面的style属性和值
dede 发布文章的时候会在里面的标签中添加一些style 属性,现在改网站想去掉这些属性和里面的值,因为文章太多所以就用下面的方法 \include\arc.listview.class.php 在 ...
- js获取单选框里面的值
rt,如果想获取单选框里面的值,该如何获取呢. <script> window.onload = function(){ //通过名字获取 getElementsByName //var ...
- 最全面的 DNS 原理入门
DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识. 本文详细介绍DNS的原理,以及如何运用工具软件观察它的运作.我的目标是,读完此文后,你就能完全理解DNS. 一.D ...
- Secure CRT 如何连接虚拟机里面的CentOS系统——当主机使用无线网的时候 作者原创 欢迎转载
第一步:设置自己的无线网,并且分享给VM8这个虚拟网卡 第二步:查看VM8网卡的IP地址,如图是192.168.137.1 第三步:设置虚拟机的配置:选择VM8网卡并且是NAT的 第四步:设置虚拟机里 ...
随机推荐
- Java课程设计---删除学生
1.界面已经在上次修改操作的过程添加完成 2.在StudentDao中添加删除方法 public boolean delete(int id) throws SQLException { DbUtil ...
- WIN10:全选一个文件夹中的所有文件
- 正则表达式(二)——Python中的相关方法
正则函数 match.search.findall.finditer.split.sub 返回一个对象:match.search.finditer 返回一个列表:findall.split 其中mat ...
- Dubbo是什么?核心总结
Dubbo --是SOA架构的具体的实现框架! 2.1 Dubbo简介 Apache Dubbo是一款高性能的Java RPC框架.官网地址:[http://dubbo.apache.org] dub ...
- mybatis介绍--基于个人学习JavaWeb的使用
mybatis介绍 该博文放在javaWeb系列下,目的是记录我们javaWeb阶段所学的知识 @time=2022/3/11/11:52(最近休息玩了两天,今天重新启动生活) 一.mybatis发展 ...
- linux文本处理grep
grep grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具 ...
- PhpStrom 常用的插件
.env files support 可以在env函数使用是提示.env文件中所有的key值的自动完成功能 Markdown support 在编写.md文件时有预览的功能 PHP composer. ...
- 1.1 STL基本概念
文章目录 1 STL概述 1.1 STL基本概念 1.2 STL 六大组件 1.3 STL优点 2.1 容器 2.2 算法 2.3 迭代器 2.4 示例 1 STL概述 STL是StandardTem ...
- mysql之常用函数(核心总结)
为了简化操作,mysql提供了大量的函数给程序员使用(比如你想输入当前时间,可以调用now()函数) 函数可以出现的位置:插入语句的values()中,更新语句中,删除语句中,查询语句及其子句中. 聚 ...
- FreeBSD 利用IPFW实现限制局域网使用QQ
QQ服务器分为三类: 1.UDP 8000端口类7个:速度最快,服务器最多.QQ上线会向这7个服务器发送UDP数据包,选择回复速度最快的一个作为连接服务器.这7个服务器名字均以sz-sz7开头,域后缀 ...