Chrome的新版本增加了对<link rel="preload">的支持。他们发布了很多参考原始文档的信息。有人能简单解释一下它是如何工作的，以及与没有rel="preload"的情况相比有什么区别吗。
在最基本的形式中，它将具有rel="preload"的link设置为高优先级。与预取不同，浏览器可以决定预取是否是个好主意，预加载将迫使浏览器这样做。
===更深入的了解：===
以下是W3c 的一个片段
许多应用程序需要对资源何时获取、处理并应用于文档。例如某些资源的加载和处理可能会被减少资源争用并提高性能的应用程序初始负载。这种行为通常通过移动将资源提取到由应用程序-即通过注入启动资源获取元素，或者在特定应用程序时通过XMLHttpRequest满足条件。
然而，也有一些情况需要提取一些资源尽可能早，但它们的处理和执行逻辑取决于特定应用程序的要求，例如依赖性管理、有条件加载、订购保证等等。目前，如果没有绩效处罚。
通过现有元素之一（例如img，脚本、链接）耦合资源获取和执行。鉴于应用程序可能想要获取，但会延迟资源的执行直到满足某种条件。使用XMLHttpRequest获取资源避免上述行为会因隐藏而导致严重的性能损失来自用户代理的DOM和预加载解析器的资源声明。只有当相关JavaScript执行，这是由于大多数页面上有大量的阻塞脚本引入了大量延迟并影响了应用程序性能。这个链接元素上的preload关键字提供声明性提取原语，用于解决上述启动早期获取并将获取与资源执行分离。像这样的preload关键字充当一个低级基元，用于启用用于构建自定义资源加载和执行行为的应用程序而不会向用户代理隐藏资源并导致延迟资源获取惩罚。
例如，应用程序可以使用preload关键字来启动CSS资源的早期、高优先级和非渲染阻塞获取然后可以由应用程序在适当的时间应用：
<!-- preload stylesheet resource via declarative markup -->
<link rel="preload" href="/styles/other.css" as="style">
<!-- or, preload stylesheet resource via JavaScript -->
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>
以下是W3C规范的一个非常深入的描述
现代浏览器的全球支持率良好，约为93%（截至2022年6月）。
Google开发人员建议rel="preload"用于更早地请求字体，以便在CSSOM准备就绪时可以使用这些字体。
字体的懒惰加载带来了一个重要的隐藏含义，可能延迟文本渲染：浏览器必须构建渲染树，它依赖于DOM和CSSOM树，然后才知道呈现文本所需的字体资源。因此，字体请求在其他关键资源之后被延迟浏览器可能被阻止呈现文本，直到资源获取。
用作：
<link rel="preload" href="/fonts/my-font.woff2" as="font">
<link rel="stylesheet" href="/styles.min.css">
此外，请注意：
并不是所有的浏览器都支持CCD_，将被忽略。但每一个浏览器支持预加载也支持WOFF2，所以这始终是格式您应该预加载的。