使用 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"> 的支援