link rel="preload" 到底是如何工作的？

Question

Chrome新版本增加了对

<link rel="preload">

的支持。他们发布了很多参考原始文档的信息。有人可以简单解释一下它是如何工作的以及与没有的情况相比有什么区别

rel="preload"

。

Answer 1

在最基本的形式中，它将具有

link

的

rel="preload"

设置为高优先级，与预取不同，浏览器可以决定它是否是一个好主意，预加载将强制浏览器这样做。

更深入的了解：

这是 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 月）。

Answer 2

Google Developers 建议使用 rel="preload"

 提前请求字体，以便在 CSSOM 准备就绪时使用它们。

延迟加载字体有一个重要的隐藏含义，可能会 延迟文本渲染：浏览器必须构建渲染树， 在它知道哪个之前，它依赖于 DOM 和 CSSOM 树 渲染文本所需的字体资源。结果，字体 请求在其他关键资源之后延迟很长时间，并且 浏览器可能会被阻止呈现文本，直到资源被 已获取。

用作：

<link rel="preload" href="/fonts/my-font.woff2" as="font">
<link rel="stylesheet" href="/styles.min.css">

另外，请注意：

并非所有浏览器都支持

<link rel="preload">

，并且在这些浏览器中，
   只会被忽略。但每个浏览器
  支持预加载也支持 WOFF2，所以这始终是格式
  你应该预加载。