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

Jeff Posnick

您是否曾想過，在不延遲網頁 onload 事件的情況下，讓瀏覽器知道網頁需要的重要字型、指令碼或其他資源？<link rel="preload"> 可讓網頁開發人員使用熟悉的 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>

那麼，這裡發生了什麼事？網頁開發人員應該熟悉範例中使用的 href 屬性，因為這是用來指定任何已連結資源的網址的標準屬性。

不過，您可能不熟悉 as 屬性，這項屬性會用於 <link> 元素的內容中，為瀏覽器提供有關預先載入要求目的地的更多背景資訊。這項額外資訊可確保瀏覽器設定適當的請求標頭、請求優先順序，以及套用任何可能適用於正確資源情境的相關內容安全性政策指令。

瞭解更多 (大量) 資訊

Yoav Weiss 撰寫了使用 <link rel="preload"> 的完整指南。如果您對這項功能感興趣，並想開始在自己的網頁上使用，建議您詳閱這篇文章，進一步瞭解這項功能的優點和創意用途。

<link rel="preload"> 取代 <link rel="subresource">，後者有重大的錯誤和缺點，且從未在 Chrome 以外的瀏覽器中實作。因此，Chrome 50 已移除對 <link rel="subresource"> 的支援。