使用 rel#39;preload' 連結為您的資源排定優先順序；

Jeff Posnick

您是否曾經想讓瀏覽器知道某個重要的字型、指令碼或 而不需延遲網頁 要onload事件嗎？<link rel="preload"> 讓網頁程式開發人員就能做到 方法，使用熟悉的 HTML 元素語法和幾個重要屬性 判斷確切行為這是 草稿標準 Chrome 50 版。

透過 <link rel="preload"> 載入的資源會儲存在本機瀏覽器中 且有效的識別碼，直到在 DOM、JavaScript 或 例如 CSS、CSS、CSS 和 JS。舉例來說，指令碼檔案 容器不會立即執行 透過 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>

這是什麼情形呢？該範例中使用的 href 屬性： 這種標準屬性可用來指定 任何已連結資源的網址

as 屬性是 然而，這種模型會用在 <link> 元素的內容中 可讓瀏覽器掌握 目的地為 正在提出預先載入要求。這些額外的資訊可確保 瀏覽器會設定適當的要求標頭、要求優先順序，以及套用 任何相關的內容安全政策 指令。

學習 (眾多)

Yoav Weiss 寫道 最終指南 瞭解如何使用 <link rel="preload">若您有意使用，並想開始使用 建議閱讀他的文章，進一步瞭解 優點和創意用途

<link rel="preload"> 取代了 <link rel="subresource">， 重大錯誤和缺點。 但 Chrome 以外的瀏覽器也從未導入這類回應因此，Chrome 50 停止支援 <link rel="subresource">。