浏览器加载外部资源主要是通过 link 标签和 script 标签，分别用于引入外部资源和执行脚本代码，在页面加载、样式渲染和交互逻辑中扮演关键角色。这些标签可以通过添加一些属性来对网页加载的性能进行优化。link 标签使用preload 和 prefetch， script标签使用async 和 defer。下面对几个属性进行详细介绍。
preload（预加载）
作用： 高优先级地提前加载当前页面必定会用到的关键资源。
行为： 1.使用 <link rel="preload">告诉浏览器："这个资源非常重要，请尽快开始加载它。"
2.浏览器会以高优先级下载该资源，但不会执行它（例如，预加载的 CSS 不会立即应用样式，预加载的 JS 不会执行代码）。
3.资源只是被缓存起来，当实际用到它时（例如在页面中遇到 <script src="..."> 或 <link rel="stylesheet">），浏览器会从缓存中立即获取，从而节省了网络请求时间。
用法：
html
<link rel="preload" href="xxx.js" as="script">rel属性：rel是relationship 的缩写，意为"关系"，它定义了当前HTML文档 与被链接的外部资源 之间的关系。当rel的值为preload 的时候 必须指定as属性，通过使用as属性来明确指定被加载资源的类型。
prefetch (预获取)
作用：低优先级地提前加载下一个页面可能用到的资源。
行为 : 1.使用 <link rel="prefetch"> 告诉浏览器："这个资源我后面可能会用，你可以在空闲的时候把它下载下来。"
2.浏览器会在空闲时间（当前页面加载完毕，网络空闲时）以低优先级下载该资源并存入缓存。
3.当用户进入下一个页面时，如果需要的资源已经被预取，就可以直接从缓存中快速加载，显著提升下一个页面的加载速度。
用法:
html
<link rel="prefetch" href="zzz.js" as="style">在 MDN文档中虽然没有提到rel="prefetch"时必须设置as属性，但是强烈推荐使用 as 属性，在资源加载时，不同类型的资源优先级不同，例如，一个脚本(as="script")的优先级会与一张图片(as="image")或一个字体(as="font")的优先级不同。
正确的类型也有助于浏览器正确地缓存资源。
async（异步加载）
作用： 不阻塞 HTML 解析，尽快加载和执行脚本。 行为:
1.浏览器在遇到 async 脚本时，会立即开始异步下载该脚本，同时继续解析 HTML。
2.一旦脚本下载完成会将执行该脚本的任务添加到宏队列，在浏览器执行栈空闲的时候，HTML 解析会被暂停，浏览器会立即执行该脚本。
3.脚本内的JS代码执行完毕后，再继续解析 HTML。
4.多个 async 脚本的执行顺序是不确定的。哪个先下载完 ，哪个就先执行（"加载优先"顺序）。
用法:
js
<script async src="aaa.js"></script>带有async属性的<script>标签对HTML的解析是下载时不阻塞，执行会阻塞
defer（延迟执行）
作用:不阻塞 HTML 解析，但在 HTML 解析完成后再按顺序执行脚本。
行为:
1.浏览器在遇到 defer 脚本时，会立即开始异步下载该脚本，同时继续解析 HTML。
2.即使脚本早已下载完成，它也会一直等待，直到整个 HTML 文档完全解析完毕
3.然后按照它们在文档中出现的顺序依次执行。
多个 defer 脚本的执行顺序是确定的，与它们在 HTML 中先后的顺序一致。
用法:
js
<script defer src="bbb.js"></script>带有defer属性的<script>标签对HTML的解析是完全不阻塞
以上是4个属性的用法及其作用。