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

杰夫·波斯尼克
Jeff Posnick
Twitter GitHub 首页

您是否曾经希望，在不延迟网页的 onload 事件的情况下，告知浏览器网页需要的重要字体、脚本或其他资源？<link rel="preload"> 让 Web 开发者能够使用熟悉的 HTML 元素语法和几个关键属性确定确切的行为，从而做到这一点。它是标准草稿，在 Chrome 50 版本中提供。

通过 <link rel="preload"> 加载的资源会存储在本地浏览器中，并且会一直有效，直到被 DOM、JavaScript 或 CSS 引用为止。例如，下面是一个潜在用例：已预加载脚本文件，但未立即执行，就如同该文件通过 DOM 中的 <script> 标记添加时一样。

<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">。