preload

通过rel="preload"进行内容预加载

元素的 rel 属性的属性值preload能够让你在你的HTML页面中

元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

preload 还有许多其他好处。使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：

更精确地优化资源加载优先级。
匹配未来的加载需求，在适当的情况下，重复利用同一资源。
为资源应用正确的内容安全策略。
为资源设置正确的 Accept 请求头

浏览器会在遇到如下link标签时，立刻开始下载main.js(不阻塞parser)，并放在内存中，但不会执行其中的JS语句。

只有当遇到script标签加载的也是main.js的时候，浏览器才会直接将预先加载的JS执行掉。

prefetch

通过rel="prefetch"进行内容预取

链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。

浏览器检查所有这些预取提示，并将每一个独立的请求排到队列之中，然后浏览器空闲时将对这些请求进行预取。每个页面都可以有多个预取提示，因为预取多个文档是合理的。例如，未来要访问的页面可能包含多张大图。

dns-prefetch

你可以通过使用 rel 属性值为 link type 中的 dns-prefetch 的标签来对特定域名进行预读取：

defer

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。如果缺少 src 属性(即内嵌脚本)，该属性不应被使用，因为这种情况下它不起作用。对动态嵌入的脚本使用 `async=false` 来达到类似的效果。

async

该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 (即没有src属性的脚本)。

结合实例看下：

首先，Parser在遇到head中preload时开始下载JS，读到script标签的时候，如果已经下载完了，直接按顺序执行之。如果没下载完，则会等到下载完再执行。这样就可以在刚进入页面时开始非阻塞的下载JS代码了。

其次，页面会在空闲时，加载prefetch的JS，如果之后页面发生跳转，跳转的目标页面引入了prefetch.js，浏览器会直接从disk缓存中读取执行。

将script标签依然放在之前，并增加defer标签，确保老浏览器兼容，并在所有DOM元素解析完成之后执行其中的代码。

prefetch 和preload_前端preload, prefetch,dns-prefetch,defer,async了解一下相关推荐

prefetch 和preload_使用 Preload/Prefetch 优化你的应用
衡量网站的性能的指标有很多,其中有项重要的指标就是网站的首屏时间,为此前端工程师们都是绞尽脑汁想尽办法进行优化自己的应用,诸如像服务端渲染,懒加载,CDN 加速,ServiceWorker 等等方法, ...
prefetch 和preload_在webpack中使用prefetch/preload
这是什么? 什么是prefetch? 这种"资源提示" 告诉浏览器这是一个在未来可能使用到的资源. 浏览器通常会在空闲状态取得这些资源,在取得资源之后搁在HTTP缓存以便于实现将来 ...
java的prefetch()_聊聊FluxFlatMap的concurrency及prefetch参数
序本文主要研究下FluxFlatMap的concurrency及prefetch参数实例 @Test public void testConcurrencyAndPrefetch(){ int c ...
有关前端性能优化—DNS解析优化的方法？
DNS简介与域名解析 DNS全称为Domain Name System,即域名系统,是域名和IP地址相互映射的一个分布式数据库. 域名系统DNS将主机名映射到IP地址,就像电话簿将人们的姓名映射到他们 ...
前端优化之DNS预解析
前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少D ...
前端优化系列:DNS预获取 dns-prefetch 提升页面载入速度
DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少DNS的请求次数,另一个就是进行DNS预获取 . DNS 作为互联网的基础协议 ...
prefetch 和preload_资源预加载preload和资源预读取prefetch简明学习
前面的话基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用资源优先级在介 ...
prefetch 和preload_prefetch和preload
前面的话基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用资源优先级在介 ...
前端基础互联网 DNS 服务器浏览器
internet表示的意思是互联网,又称网际网络,根据音译也被叫做因特网(Internet).英特网,是网络与网络之间所串连成的庞大网络.这些网络以一组通用的协议相连,形成逻辑上的单一且巨大的全球化网 ...

prefetch 和preload_前端preload, prefetch,dns-prefetch,defer,async了解一下