一. defer 和 async用于脚本标签

1. 无属性

浏览器暂停解析-->发送请求获取js脚本文件-->执行js代码-->浏览器继续解析

弊端：js请求得不到响应或者执行时间过程，页面白屏；

2. async 即脚本的网络请求是异步的

<script async src="script1.js"></script>

浏览器解析与发送请求获取脚本一起执行-->浏览器解析暂停-->执行js代码-->浏览器继续解析

弊端：async的执行时间是不确定的，如果脚本中有对DOM的操作，则有可能获取不到DOM。如果有多个async，则执行顺序也是不确定的，完全取决于网络传输结果，谁先到先执行谁。

3. defer 表示延迟

<script defer src="script1.js"></script>

浏览器解析与发送请求获取脚本一起执行-->浏览器解析继续执行-->浏览器解析完毕后执行js代码

• 如果存在多个defer文件，浏览器会按照他们在html中出现的顺序执行，不会破坏js的依赖关系。
• 在type=module下
  

二、preload、prefetch、prerender、preconnect、dns-prefetch用于link标签

1. preload 用于浏览器在页面加载过程中提前加载指定的资源（如脚本、样式表、字体等）

<!-- 脚本 样式 字体 -->
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="font.woff2" as="font">

<!-- 通过 <link rel="preload"> 只是预加载了资源，但是资源加载完成后并不会执行，所以需要在想要执行的地方通过 <script> 来引入它： -->
<script src="./script.js"></script>

2. prefetch 用于加载未来（比如下一个页面或者下一个页面要用的的js、css等）会用到的资源，并且告诉浏览器在空闲的时候去下载，它会将下载资源的优先级降到最低。

<!-- jquery是下一个页面要用到的资源 -->
<link rel="prefetch" as="script" href="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js">

3. prerender 用于指示浏览器在后台预渲染指定的页面，以便在用户访问到该页面时能够立即呈现出来

<link rel="prerender" href="next-page.html">

4. preconnect 用于指示浏览器在空闲时间预先建立与指定域名的连接

<link rel="preconnect" href=" https://example.com ">

5. dns-prefetch 用于提前解析之后可能会用到的域名，将域名解析为IP地址并缓存。

<link rel="dns-prefetch" href="https://cdn.bootcss.com">

参考：

# preload、prefetch、preconnect 和 dns-prefetch 知多少
# 图解 script 标签中的 async 和 defer 属性