【有哪些标签属性可以预加载资源？如何使用】

HTML中可以使用以下标签属性预加载资源：

1. 标签的rel属性。

可以指定需要预加载的文件类型，并使用as属性指定文件类型，以便浏览器优化预加载资源的方式。
例如：

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="app.js" as="script">
<link rel="preload" href="font.woff2" as="font">

2. 标签的 rel=“prefetch” 属性。

表示该资源可能在将来的某个时间点会被使用，但并不是必须的，可以通过异步方式获取。
使用方法如下：

<link rel="prefetch" href="path/to/resource">

3. 标签的 rel=“dns-prefetch” 属性。

用于预解析域名，以减少连接时延。使用方法如下：

<link rel="dns-prefetch" href="//example.com">

4. 标签的 loading 属性。

表示图片的加载方式，可以选择 lazy、eager 和 auto 三种。其中 lazy 表示图片懒加载，只有当用户滚动到该图片时才加载；eager 表示图片即刻加载；auto 表示由浏览器自行决定加载方式。使用方法如下：

<img loading="lazy" src="path/to/image">

5.

例如：

<script src="app.js" defer></script>
<script src="analytics.js" async></script>

defer属性指示浏览器立即下载脚本，但延迟脚本的执行，直到文档被解析完成。
async属性指示浏览器下载并异步执行脚本，而不阻塞文档的解析和渲染过程。