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