html中资源修饰符的用法及作用

1、async（script标签布尔属性）

异步加载js文件，不阻塞html解析，当js加载完毕后，停止解析html，立即执行js，执行完毕后继续解析html

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

2、defer（script标签布尔属性）

html解析完成后在执行js，类似于DOMContentLoaded事件

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

3、preload（link标签rel属性）

预先加载资源（任意资源），不执行任何操作，一般用来缓存时用，其它地方使用这个资源的时候就不会再次发送请求了

<link rel="preload" href="css/index.css">
<link rel="preload" href="js/index.js">  
<link rel="preload" href="img/home-bg.png">

4、prefetch（link标签rel属性）

跟preload类似，只是拿取的时机不一致，preload是页面加载时立即获取，而prefetch是当浏览器空闲的时候获取

<link rel="prefetch" href="css/index.css">
<link rel="prefetch" href="js/index.js">
<link rel="prefetch" href="img/home-bg.png">