使用 link rel='preload' 确定资源优先级

Jeff Posnick

您有没有想过让浏览器知道重要的字体、脚本或 网页所需的其他资源 onload事件？<link rel="preload">让 Web 开发者能够 使用熟悉的 HTML 元素语法和几个关键属性 以确定确切行为这是一个 草稿标准，则包含在 Chrome 50 版本。

通过 <link rel="preload"> 加载的资源存储在本地浏览器中， 并且实际上会处于休眠状态，直到在 DOM、JavaScript 或 CSS。例如，这里有一个潜在的应用场景， 已预加载，但并未立即执行， 通过 <script> 标记包含在 DOM 中。

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

那么这里发生了什么呢？此示例中使用的 href 属性应 因为这是 Web 开发者所用的标准属性， 任何链接资源的网址。

as 属性为 不过，您可能不熟悉，并且它用于 <link> 元素上下文 为浏览器提供更多有关 目的地，共 正在发出预加载请求。这些附加信息可确保 浏览器会设置相应的请求标头、请求优先级， 任何相关的内容安全政策 可能针对正确的资源上下文而设的指令。

学习（大量）更多内容

Yoav Weiss 写道 权威指南 到使用 <link rel="preload">。如果您感兴趣并想要开始使用 建议您仔细阅读他的文章，详细了解 优势和创意使用场景。

<link rel="preload"> 取代了 <link rel="subresource">，后者 存在明显的错误和缺点 Chrome 之外的浏览器中从未实现过。因此，Chrome 50 停止支持对 <link rel="subresource">。