使用 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>

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

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

学习（大量）更多内容

Yoav Weiss 编写了有关如何使用 <link rel="preload"> 的权威指南。如果您有兴趣开始在自己的网页上使用该工具，建议您通读他的文章，详细了解该工具的优势和富有创意的应用场景。

<link rel="preload"> 取代了 <link rel="subresource">，后者存在严重的错误和缺点，从未在 Chrome 以外的浏览器中实现。因此，Chrome 50 取消了对 <link rel="subresource"> 的支持。