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

Question

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

Answer 1

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

===更深入的了解:===

这是来自 W3c 的一个片段

Many applications require fine-grained control over when resources arefetched, processed, and applied to the document. For example, theloading and processing of some resources may be deferred by theapplication to reduce resource contention and improve performance ofthe initial load. This behavior is typically achieved by movingresource fetching into custom resource loading logic defined by theapplication - i.e. resource fetches are initiated via injectedelements, or via XMLHttpRequest, when particular applicationconditions are met.

However, there are also cases where some resources need to be fetchedas early as possible, but their processing and execution logic issubject to application-specific requirements - e.g. dependencymanagement, conditional loading, ordering guarantees, and so on.Currently, it is not possible to deliver this behavior without aperformance penalty.

Declaring a resource via one of the existing elements (e.g. img,script, link) couples resource fetching and execution. Whereas, anapplication may want to fetch, but delay execution of the resourceuntil some condition is met. Fetching resources with XMLHttpRequest toavoid above behavior incurs a serious performance penalty by hidingresource declarations from the user agent's DOM and preload parsers.The resource fetches are only dispatched when the relevant JavaScriptis executed, which due to abundance of blocking scripts on most pagesintroduces significant delays and affects application performance. Thepreload keyword on link elements provides a declarative fetchprimitive that addresses the above use case of initiating an earlyfetch and separating fetching from resource execution. As such,preload keyword serves as a low-level primitive that enablesapplications to build custom resource loading and execution behaviorswithout hiding resources from the user agent and incurring delayedresource fetching penalties.

For example, the application can use the preload keyword to initiateearly, high-priority, and non-render-blocking fetch of a CSS resourcethat can then be applied by the application at appropriate time:

<!-- 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>

这是一个真正的in-depth description来自 W3C 规范。

全局支持是good across modern browsers ，约为 93%(截至 2022 年 6 月)。