<link rel="preload"> 标签可以用来预加载资源。
它告诉浏览器，这个资源对当前页面来说是必要的，并且应该尽快下载。 这与浏览器通常的加载行为不同，浏览器通常会等到解析 HTML 并构建 DOM 树后，才会下载一些资源（例如 CSS 和 JavaScript）。 使用 preload 可以提前告知浏览器需要下载这些资源，从而提高页面加载性能。
以下是使用 <link rel="preload"> 的一些示例：
- 预加载 CSS:
<link rel="preload" href="style.css" as="style">
- 预加载 JavaScript:
<link rel="preload" href="script.js" as="script">
- 预加载字体:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
- 预加载图片:
<link rel="preload" href="image.png" as="image">
as 属性:
as 属性是必需的，它指定了资源的类型。这有助于浏览器确定资源的优先级和如何处理它。一些常用的值包括 style、script、font、image、document、fetch 等。 正确的使用 as 属性可以提高性能，并避免一些潜在的问题。
type 属性 (可选，但推荐):
对于字体和视频等资源，建议使用 type 属性。这有助于浏览器避免下载不必要的资源，例如，如果浏览器不支持指定的字体类型。
crossorigin 属性 (对于字体和某些其他资源):
如果资源来自不同的域，则需要添加 crossorigin 属性。这告诉浏览器以 CORS 的方式请求资源。对于字体，这通常是必需的。
rel="preload" 与 rel="prefetch" 的区别:
preload: 用于加载当前页面必需的资源。浏览器会优先下载这些资源。prefetch: 用于加载将来可能需要的资源，例如用户可能访问的下一页的资源。浏览器会在空闲时间下载这些资源，优先级较低。
注意事项:
- 过度使用
preload可能会适得其反，因为它可能会阻塞其他重要资源的下载。 只预加载关键资源。 - 确保预加载的资源最终会被使用。如果预加载了一个资源但没有使用它，会浪费带宽和浏览器资源。 例如，预加载了 CSS 文件，但没有在 HTML 中使用
<link rel="stylesheet">引入它。 - 可以使用 Chrome DevTools 的 Network 面板来检查预加载是否正常工作。
总而言之，<link rel="preload"> 是一个强大的工具，可以优化页面加载性能，但需要谨慎使用，并确保正确设置 as、type 和 crossorigin 属性。