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

Question

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

50

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

Chrome新版本增加了对<link rel="preload">的支持。这个链接标签告诉浏览器预加载指定的资源，例如脚本、字体或图像等，在需要时可以更快地呈现页面。与不使用rel="preload"相比，它可以提高网站性能和用户体验。

- Ilya Chernomordik

2个回答

20

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，因此您应该始终预加载该格式。

- Zanon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sonny Prince · Accepted Answer

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

===更深入的了解：=== 以下是来自W3c的片段：

许多应用程序需要对资源的获取、处理和应用于文档的时间进行细粒度控制。例如，应用程序可能会延迟某些资源的加载和处理，以减少资源争用并提高初始加载的性能。这通常通过将资源获取移动到应用程序定义的自定义资源加载逻辑中实现——即通过注入元素或通过XMLHttpRequest在满足特定应用程序条件时启动资源获取。

然而，也有一些情况下，一些资源需要尽早获取，但它们的处理和执行逻辑受到特定于应用程序的要求的影响，例如依赖关系管理、条件加载、排序保证等。目前，如果不付出性能代价，就无法实现此行为。

通过现有元素之一（例如img、script、link）声明资源会将资源获取和执行耦合在一起。相反，应用程序可能希望获取资源，但推迟资源的执行直到满足某些条件。使用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规范中一个非常详细的描述。

截至2022年6月，现代浏览器普遍支持预加载，全球覆盖率约为93％。