前言
在JavaScript中，资源提示符（Resource Hint）是一种使用<link>或<script>HTML标签来提示浏览器有关资源的方式。
我们正常开发中，对于这些接触不多，接下来了解一下。
1. 常用的资源提示符
以下是一些常见的资源提示符：
- 指定资源的异步加载（Async）：
xml
<script src="script.js" async></script>- 指定资源的异步（Defer）：
xml
<script src="script.js" defer></script>- 预加载关键资源（Preload）：
ini
<link rel="preload" as="script" href="script.js">- 预解析关键资源（Prefetch）：
ini
<link rel="prefetch" as="script" href="script.js">- 预检查关键资源（Preconnect）：
ini
<link rel="preconnect" href="https://example.com">- 预检查关键资源（DNS-prefetch）：
ini
<link rel="dns-prefetch" href="https://example.com">2. 案例说明
2.1 正常加载js
js的执行是自上而下，如果中间遇见资源加载，会中止dom解析，如下图所示：
案例：写一个index.html,写6千多个p标签，在标签前后分别打印p元素的个数。
index.html
html
<script src="./index.js"></script>
<p></p>*6314个
<script src="./index.js"></script>index.js
js
console.log('打印***nodes', document.querySelectorAll('p'))结果如图所示：
可以看到第一个打印为0，是因为dom没有开始解析，后面打印出全部是dom已经解析完成。
那么如何才能将script标签放在任意位置，加载js资源时，也不影响dom解析呢？接下来看看async。
2.2 使用async加载js
当在script标签中使用async，不会阻塞dom解析，当资源加载完成，会立刻执行。如下图所示：
案例：加上async，将script标签放在之前，看打印结果。
index.html
html
<script src="./index.js"></script>
<script src="./index.js" async></script>
<p></p>*3000个
<script src="./index.js"></script>结果如下： 
可以放在任何位置，资源加载完成就运行。可以看到async打印的数量是不确定的。
问题是：资源加载完成，你直接运行，没办法控制dom解析了多少。
接下来看看defer如何解决。
2.3 defer加载js
使用defer是向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的。
包含 defer 属性的脚本将阻塞 DOMContentLoaded 事件触发，直到脚本完成加载并执行。
案例：使用defer添加在标签之前，看打印结果。
html
<script src="./index.js" defer></script>
<script src="./index.js" async></script>
<p></p>*3000个
<script src="./index.js"></script>结果如下：
可以看到，js，等到dom解析执行之后，才执行
2.4 module解析
当script标签的设置为type="module"，默认是defer进行解析。
案例：
html
<script src="./index.js" type="module"></script>
<p></p>*3000个结果如下：
可以看到是dom解析完成后才执行的。
2.5 preload、prefetch
prefetch
关键字 prefetch 作为元素 <link> 的属性 rel 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。
preload
指定页面很快就需要的资源，拿资源，不执行，只是安排脚本以更高的优先级进行下载和缓存。
使用 preload 的 rel 属性，将 <link> 标签转变成任何我们想要的资源的预加载器。还需要指定：
优先级
- preload ：直接去拿，优先级高
- prefetch：优先级低，空闲拿
3. 总结
接下来总结一波：
- async : 当在
<script>标签中使用async属性时，该脚本将异步加载和执行，不会阻塞HTML解析器的进程。 - defer : 与
async类似，defer也允许脚本在HTML解析完成后执行，但不会阻塞解析。但与async不同，所有带有defer属性的脚本都会按照它们在HTML中出现的顺序并行加载，但在DOMContentLoaded事件触发前串行执行。 - preload :
<link rel="preload">允许开发者预加载页面未来可能需要的资源，如字体、图片或脚本。这些资源将在浏览器空闲时加载，并在需要时立即可用，从而提高了页面性能。 - prefetch :
<link rel="prefetch">则用于预取页面可能导航到的下一个页面的资源。这有助于在用户实际导航到该页面之前加载并缓存这些资源，从而减少页面加载时间。 - Preconnect 和 DNS-Prefetch: 这两个资源提示符分别用于建立早期TCP连接和解析DNS，以加快未来HTTP请求的响应速度。
如有错误，请指正O^O!