link rel="preload" 究竟是如何工作的？
How exactly does link rel="preload" work?
Chrome的新版本增加了对<link rel="preload">的支持。他们发布了很多参考原始文档的信息。有人可以简单解释一下它是如何工作的，以及与没有 rel="preload".
的情况相比有什么区别吗？
在最基本的形式中，它将具有 rel="preload" 的 link 设置为高优先级，与浏览器可以决定它是否是一个好主意的预取不同，预加载将强制浏览器这样做。
===更深入的了解：===
这是 W3c 的一个片段
Many applications require fine-grained control over when resources are
fetched, processed, and applied to the document. For example, the
loading and processing of some resources may be deferred by the
application to reduce resource contention and improve performance of
the initial load. This behavior is typically achieved by moving
resource fetching into custom resource loading logic defined by the
application - i.e. resource fetches are initiated via injected
elements, or via XMLHttpRequest, when particular application
conditions are met.
However, there are also cases where some resources need to be fetched
as early as possible, but their processing and execution logic is
subject to application-specific requirements - e.g. dependency
management, conditional loading, ordering guarantees, and so on.
Currently, it is not possible to deliver this behavior without a
performance penalty.
Declaring a resource via one of the existing elements (e.g. img,
script, link) couples resource fetching and execution. Whereas, an
application may want to fetch, but delay execution of the resource
until some condition is met. Fetching resources with XMLHttpRequest to
avoid above behavior incurs a serious performance penalty by hiding
resource declarations from the user agent's DOM and preload parsers.
The resource fetches are only dispatched when the relevant JavaScript
is executed, which due to abundance of blocking scripts on most pages
introduces significant delays and affects application performance. The
preload keyword on link elements provides a declarative fetch
primitive that addresses the above use case of initiating an early
fetch and separating fetching from resource execution. As such,
preload keyword serves as a low-level primitive that enables
applications to build custom resource loading and execution behaviors
without hiding resources from the user agent and incurring delayed
resource fetching penalties.
For example, the application can use the preload keyword to initiate
early, high-priority, and non-render-blocking fetch of a CSS resource
that 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>
下面是对 W3c 的深入了解：https://w3c.github.io/preload/
但如果您打算使用它，请注意浏览器支持不是很好。全球浏览器支持率为 82%。
Google Developers 建议使用 rel="preload" 提前请求字体，以便在 CSSOM 准备就绪时使用它们。
Lazy loading of fonts carries an important hidden implication that may
delay text rendering: the browser must construct the render tree,
which is dependent on the DOM and CSSOM trees, before it knows which
font resources it needs in order to render the text. As a result, font
requests are delayed well after other critical resources, and the
browser may be blocked from rendering text until the resource is
fetched.
用作：
<link rel="preload" href="/fonts/my-font.woff2" as="font">
<link rel="stylesheet" href="/styles.min.css">
另外，注意：
Not all browsers support <link rel="preload">, and in those browsers,
will just be ignored. But every browser that
supports preloading also supports WOFF2, so that's always the format
that you should preload.
Chrome的新版本增加了对<link rel="preload">的支持。他们发布了很多参考原始文档的信息。有人可以简单解释一下它是如何工作的，以及与没有 rel="preload".
在最基本的形式中，它将具有 rel="preload" 的 link 设置为高优先级，与浏览器可以决定它是否是一个好主意的预取不同，预加载将强制浏览器这样做。
===更深入的了解：===
这是 W3c 的一个片段
Many applications require fine-grained control over when resources are fetched, processed, and applied to the document. For example, the loading and processing of some resources may be deferred by the application to reduce resource contention and improve performance of the initial load. This behavior is typically achieved by moving resource fetching into custom resource loading logic defined by the application - i.e. resource fetches are initiated via injected elements, or via XMLHttpRequest, when particular application conditions are met.
However, there are also cases where some resources need to be fetched as early as possible, but their processing and execution logic is subject to application-specific requirements - e.g. dependency management, conditional loading, ordering guarantees, and so on. Currently, it is not possible to deliver this behavior without a performance penalty.
Declaring a resource via one of the existing elements (e.g. img, script, link) couples resource fetching and execution. Whereas, an application may want to fetch, but delay execution of the resource until some condition is met. Fetching resources with XMLHttpRequest to avoid above behavior incurs a serious performance penalty by hiding resource declarations from the user agent's DOM and preload parsers. The resource fetches are only dispatched when the relevant JavaScript is executed, which due to abundance of blocking scripts on most pages introduces significant delays and affects application performance. The preload keyword on link elements provides a declarative fetch primitive that addresses the above use case of initiating an early fetch and separating fetching from resource execution. As such, preload keyword serves as a low-level primitive that enables applications to build custom resource loading and execution behaviors without hiding resources from the user agent and incurring delayed resource fetching penalties.
For example, the application can use the preload keyword to initiate early, high-priority, and non-render-blocking fetch of a CSS resource that 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>
下面是对 W3c 的深入了解：https://w3c.github.io/preload/
但如果您打算使用它，请注意浏览器支持不是很好。全球浏览器支持率为 82%。
Google Developers 建议使用 rel="preload" 提前请求字体，以便在 CSSOM 准备就绪时使用它们。
Lazy loading of fonts carries an important hidden implication that may delay text rendering: the browser must construct the render tree, which is dependent on the DOM and CSSOM trees, before it knows which font resources it needs in order to render the text. As a result, font requests are delayed well after other critical resources, and the browser may be blocked from rendering text until the resource is fetched.
用作：
<link rel="preload" href="/fonts/my-font.woff2" as="font">
<link rel="stylesheet" href="/styles.min.css">
另外，注意：
Not all browsers support
<link rel="preload">, and in those browsers, will just be ignored. But every browser that supports preloading also supports WOFF2, so that's always the format that you should preload.