link rel =" preload"工作？ [英] How exactly does link rel="preload" work?

问题描述

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

Chrome's new version added support for <link rel="preload">. They have posted a lot of info with references to the original documentation. Can someone provide simple explanation on how it works and what is the difference compared to the case without rel="preload".

推荐答案

在它最基本的形式中，它设置链接，其中 rel =preload为高优先级，与预取不同，浏览器可以判断它是否是个好主意，preload会强制浏览器这样做。

In it's most basic form it sets the link that has rel="preload" to a high priority, Unlike prefetching, which the browser can decide whether it's a good idea or not, preload will force the browser to do so.

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

这是W3c的片段

许多应用程序需要细化控制何时获取，处理和应用资源
。例如，某些资源的
加载和处理可能会被
应用程序推迟，以减少资源争用并提高初始加载
的性能。这种行为通常是通过将
资源获取移动到由
应用程序定义的自定义资源加载逻辑来实现的 - 即，当特定应用程序$ b $时，通过注入的
元素或通过XMLHttpRequest启动资源提取。 b条件得到满足。

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.

通过现有元素之一声明资源（例如img） ，
脚本，链接）耦合资源获取和执行。然而，
应用程序可能想要获取，但延迟执行资源
直到满足某些条件。使用XMLHttpRequest获取资源到
避免上述行为通过隐藏用户代理的DOM和预加载解析器中的
资源声明而导致严重的性能损失。
仅在执行相关的JavaScript
时调度资源提取，这是由于大多数页面上的大量阻塞脚本导致了大量延迟并影响了应用程序性能。链接元素上的
preload关键字提供了一个声明性的fetch
原语，它解决了上述启动早期
提取并将提取与资源执行分开的用例。因此，
preload关键字用作低级原语，使
应用程序能够构建自定义资源加载和执行行为
，而不会从用户代理隐藏资源并导致延迟的
资源获取惩罚。

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.

例如，应用程序可以使用preload关键字来启动
早期，高优先级和非渲染阻塞的CSS提取资源
然后可以在适当的时间由应用程序应用：

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/

Here's a really in-depth look on W3c: https://w3c.github.io/preload/

但我会小心的你计划使用它作为浏览器支持不是那么好，全球broswer支持只有0.18％。

But i would be careful if you plan on using it as browser support is not that great, Global broswer support is only at 0.18%.

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

这篇关于link rel =" preload"工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！