链接 rel="preload" 究竟是如何工作的？

Posted 2023-05-07

【中文标题】链接 rel="preload" 究竟是如何工作的？

【英文标题】：How exactly does link rel="preload" work?

【发布时间】：2016-08-07 01:43:27

【问题描述】：

Chrome 的新版本增加了对<link rel="preload"> 的支持。他们发布了很多参考原始文档的信息。有人可以简单解释一下它是如何工作的，与没有rel="preload"的情况相比有什么区别。

【参考方案1】：

在其最基本的形式中，它将具有rel="preload" 的link 设置为高优先级，与预取不同，浏览器可以决定它是否是一个好主意，预加载将强制浏览器这样做。

===更深入的了解：===

这是来自 W3c 的 sn-p

许多应用程序需要细粒度地控制资源何时被分配 获取、处理并应用于文档。例如， 某些资源的加载和处理可能会被延迟 应用程序，以减少资源争用和提高性能 初始负载。这种行为通常是通过移动来实现的 将资源提取到由定义的自定义资源加载逻辑中 应用程序 - 即资源获取是通过注入启动的 元素，或通过 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 的深入了解：https://w3c.github.io/preload/

但如果您打算使用它，请注意浏览器支持不是那么好。全球浏览器支持率为 82%。

这是完整列表：http://caniuse.com/#search=preload

【讨论】：

浏览器无论如何都会加载css，所以它唯一要做的就是加载之前的js，例如？给予它比其他更高的优先级？

@IlyaChernomordik 当然，最终一切都会被加载，这只是将您添加的文件 rel="preload" 强制到该队列的顶部。

真的不明白为什么没有把它解释得那么简单，而是写了很多东西:)

@IlyaChernomordik 哈哈！我同意 - 很高兴我能帮上忙！

它不只是将它添加到队列的前面，它会更早地将它放入队列（因此​​允许浏览器更早地开始下载它）。添加它也没有必要“小心”，没有缺点 - 不支持它的浏览器会忽略该链接，但支持它的浏览器会受益。您不会通过支持新浏览器来破坏旧浏览器。

【参考方案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，所以总是这样的格式 你应该预加载。