Ily*_*dik 12 css browser html5 preloading
Chrome的新版本增加了支持<link rel="preload">.他们发布了大量有关原始文档参考的信息.有人可以提供关于它如何工作的简单解释,与没有的情况相比有什么不同rel="preload".
在它的最基本的形式，它设置link有rel="preload"一个高优先级，与预取，该浏览器可以决定它是否是一个好主意或没有，预紧力将迫使浏览器这样做。
=== 更深入的了解： ===
这是W3c的片段
许多应用程序需要对何时获取，处理和应用到文档的资源进行细粒度的控制。例如，应用程序可能会延迟某些资源的加载和处理，以减少资源争用并提高初始负载的性能。通常通过将资源获取移入应用程序定义的自定义资源加载逻辑中来实现此行为，即，在满足特定应用程序条件时，通过注入的元素或通过XMLHttpRequest启动资源获取。
但是，在某些情况下，需要尽早获取某些资源，但是它们的处理和执行逻辑要符合特定于应用程序的要求，例如，依赖管理，条件加载，排序保证等。当前，在没有性能损失的情况下无法实现此行为。
通过现有元素之一（例如img，脚本，链接）声明资源会耦合资源的获取和执行。而应用程序可能想要获取，但是将资源的执行延迟到满足某些条件为止。使用XMLHttpRequest来获取资源以避免上述行为的做法是，通过从用户代理的DOM和预加载解析器中隐藏资源声明来严重损害性能。仅在执行相关的JavaScript时才分派资源获取，这是由于大多数页面上的大量阻塞脚本导致了明显的延迟并影响了应用程序性能。链接元素上的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的真正深入了解：https ://w3c.github.io/preload/
但是，如果您打算使用它，请注意浏览器支持不是那么好。全球浏览器支持率为82％。
以下是完整列表：http : //caniuse.com/#search=preload
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，因此这始终是您应该预加载的格式。