使用 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 属性，因为它是用于指定任何关联资源的网址的标准属性。

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

了解更多

Yoav Weiss 撰写了有关使用 <link rel="preload"> 的权威指南。如果您对此感兴趣，并希望开始在自己的网页上使用它，建议您阅读他的文章，详细了解其优势和富有创意的使用场景。

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