在 Web 开发中，优化页面加载速度和提升用户体验至关重要。<link rel="preload"> 标签是一种非常有效的前端性能优化工具，它可以让浏览器资源预加载，在页面开始渲染之前提前加载关键资源。然而，在使用 preload 时，开发者常常会遇到与跨域资源加载相关的问题，例如“A preload for is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.”错误，那么如何正确使用 preload 呢？在这篇文章中，我们将深入探讨如何使用 preload 标签来提升网页性能，并详细解析跨域资源预加载过程中可能遇到的错误，特别是“request credentials mode does not match”问题。通过本文，你将学习如何修复这些常见错误，正确设置 crossorigin 属性，并掌握 preload 标签的最佳实践，帮助你加速网页加载，优化资源管理，全面提升用户体验。
什么是 preload？
<link rel="preload"> 是一个 HTML 标签，用于声明页面需要的资源，并在页面渲染之前开始加载这些资源。通过这种方式，可以减少资源加载时间，提升页面渲染速度。虽然 preload 中含有“load”一词，但它并不会实际加载和执行脚本，而是将资源调度到下载队列中，并给予更高的优先级。
HTML preload 基本用法
通常我们使用 <link> 标签加载 CSS 文件来为页面设置样式：
<link rel="stylesheet" href="styles/main.css" />
而在使用 preload 时，我们需要指定资源的路径和资源的类型：
<head>
<meta charset="utf-8" />
<title>Preload 示例</title>
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>网页内容</h1>
<canvas></canvas>
<script src="main.js" defer></script>
</body>
通过这种方式，我们可以在资源实际需要之前加载它们，从而减少渲染阻塞，提高页面加载性能。
解决 HTML preload 跨域资源加载问题
常见问题：跨域加载失败
在预加载跨域资源时，开发者可能会遇到以下跨域资源请求失败的错误提示：
A preload for xxx is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
这是因为在预加载跨域资源时，浏览器要求设置 crossorigin 属性，以确保请求的 CORS 模式与资源的实际请求相匹配。这个问题在加载字体文件等资源时尤为常见。
解决方法：使用 crossorigin 属性
为了解决这个问题，你需要在 <link> 标签中添加 crossorigin="anonymous" 属性。以下是一个修复错误的示例：
<link
rel="preload"
href="/fonts/font.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
通过这种方式，你可以确保资源的 CORS 模式匹配，避免加载失败的问题。
crossorigin 属性详解
crossorigin 属性用于指定在跨域请求资源时应如何处理凭据（如 cookies 和 HTTP 认证信息）。当使用 preload 加载跨域资源时，正确配置 crossorigin 属性非常重要，否则可能导致预加载失败。
crossorigin 属性有以下三个值：
anonymous:- 在这种模式下，浏览器会以匿名模式进行跨域请求，不会发送用户凭据（如 cookies）。
- 适用于大多数情况下的跨域资源加载，尤其是字体文件和图片预加载。
- 示例：
<link rel="preload" href="/fonts/font.woff2" as="font" crossorigin="anonymous" />
use-credentials:- 这种模式下，浏览器会在跨域请求中包含用户凭据（如 cookies 和 HTTP 认证信息）。
- 适用于需要用户认证信息才能访问的资源，通常用得较少。
- 示例：
<link rel="preload" href="https://example.com/resource" as="script" crossorigin="use-credentials" />
默认值（不设置）:
- 如果不设置
crossorigin属性，浏览器会根据资源的来源自动选择是否发送凭据。对于大多数情况下的跨域请求，建议显式设置crossorigin属性，以避免潜在的错误。
- 如果不设置
使用 crossorigin 的注意事项
- 字体文件: 由于安全限制，跨域加载字体文件时通常需要设置
crossorigin="anonymous"，否则会导致字体无法正确加载。 - CORS 头: 服务器端需要正确配置 CORS 响应头，例如
Access-Control-Allow-Origin，以允许跨域请求。 - 错误处理: 如果资源请求没有正确设置
crossorigin属性，可能会导致浏览器阻止资源加载，并在控制台中显示 CORS 相关的错误信息。
通过合理配置 crossorigin 属性，开发者可以确保跨域资源加载的安全性和一致性，从而有效解决跨域资源请求失败等问题。
其他 preload 的优势与使用技巧
使用 as 属性指定预加载资源的类型，不仅可以让浏览器正确缓存资源，还能应用正确的内容安全策略（CSP）以及设置合适的 Accept 请求头。
支持的 as 属性值
as 属性可以指定以下类型的内容：
fetch: 用于fetch或XHR请求的资源，如ArrayBuffer、WebAssembly 或 JSON 文件。font: 字体文件。image: 图片文件。script: JavaScript 文件。style: CSS 样式表。track: WebVTT 文件。
注意，font 和 fetch 的预加载需要设置 crossorigin 属性。
包含 MIME 类型
你可以为 <link> 元素添加 type 属性以指定资源的 MIME 类型，从而帮助浏览器判断是否需要加载该资源。例如：
<link rel="preload" href="image.avif" as="image" type="image/avif" />
这种方式可以确保浏览器仅在支持该资源类型时才进行加载，从而避免不必要的下载。
使用媒体查询预加载资源
<link> 元素还支持 media 属性，你可以利用这个属性根据用户的设备条件选择性地预加载资源。例如：
<link
rel="preload"
href="bg-image-narrow.png"
as="image"
media="(max-width: 600px)"
/>
<link
rel="preload"
href="bg-image-wide.png"
as="image"
media="(min-width: 601px)"
/>
这种方法可以有效地为不同屏幕尺寸的用户加载合适的资源，进一步优化页面加载性能。
通过脚本实现预加载
你还可以使用 JavaScript 动态添加预加载标签，例如：
const preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
这种方式允许你在需要时动态预加载资源，但延迟实际执行直到你准备好使用该资源。
结语
通过这些方法，你可以更好地利用 preload 提升网页性能，同时避免跨域资源加载失败的问题。如果你在网页开发中遇到类似问题，记得检查 crossorigin 属性的设置。
