什么是资源提示符

在HTML中我们有以下标签是可以加载外部资源的：<script>、<link>、<img>、<iframe>、<object>、<embed> 等。在加载外部资源时提示浏览器采用何种方式加载资源，是阻塞还是非阻塞，是同步还是异步 的提示符我们称之为 资源提示符。目前资源提示符基本使用在 <script>、<link>标签上。

常见的资源提示符有

async

<script arc="xxxx.js" async></script>

异步下载JS文件，不会阻断DOM解析，但是会在下载完成之后立即执行所下载的JS文件。

defer

<script arc="xxxx.js" defer></script>

异步下载JS文件，不会阻断DOM解析，但是会在DOM解析完成之后才执行下载的JS文件。

如果有多个设置了defer的script标签存在，会按照顺利执行所有的script。

如果有多个设置了async和defer的script标签同时存在，则会先执行设置了async的标签

preload

<link rel="preload" href="xxx.js">
<link rel="preload" href="xxx.css">

预加载，让浏览器尽快提前加载资源但是不执行，preload的优先级高于prefetch。

prefetch

<link rel="prefetch" href="xxx.js">
<link rel="prefetch" href="xxx.css">

预加载，让浏览器在空闲时下载，但是不执行。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel