link rel =“preload”究竟如何工作？

Question

Chrome的新版本增加了对<link rel="preload">的支持。他们已经发布了大量的信息，并引用了原始文档。有人可以提供简单的解释，说明它是如何工作的，与没有rel="preload"的情况相比有什么不同。

Answer 1

在它最基本的形式中，它将link的rel="preload"设置为高优先级。与prefetching不同，浏览器可以决定它是否是个好主意，预加载会强制浏览器执行此操作。

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

下面是W3C

片段

许多应用需要在资源 获取，处理了细粒度的控制，并应用于文档。例如，某些资源的加载和处理可能会被 应用推迟，以减少资源争用并提高初始负载的性能。通常通过将 资源移入由 应用程序定义的定制资源加载逻辑 - 即通过注入 元素或通过XMLHttpRequest启动资源提取，当满足特定应用程序 条件时实现此行为。然而，也有一些情况需要尽早提取一些资源 ，但是它们的处理和执行逻辑是 ，受到特定于应用的需求的影响 - 例如，依赖关系 管理，有条件加载，排序保证等等。 目前，无法在没有 性能损失的情况下提供此行为。

声明通过现有的元件中的一个（例如IMG， 脚本，链接）耦合资源的读取和执行的资源。然而， 应用可能想要获取，但是延迟执行资源 ，直到满足某些条件。使用XMLHttpRequest获取资源，以避免 上述行为招致来自用户代理的DOM和预紧解析器隐藏 资源声明严重的性能损失。当相关的JavaScript 被执行，这是由于大量在大多数页面上阻止脚本的 介绍显著的延迟，并影响应用程序的性能 资源取，仅调度。上连杆元件 预载荷关键字提供声明性取 原始其解决发起 早期提取和分离从资源执行读取的上述使用情况。因此， 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/

但是，如果你打算使用它作为浏览器的支持是不是很大，全球broswer只支持在0.18％是我会小心。

以下是完整名单：http://caniuse.com/#search=preload