您是否曾希望在不延遲頁面的 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="subresource">
,再見
<link rel="preload">
會取代 <link rel="subresource">
,後者俱有重大錯誤和缺點。此外,後者從未在 Chrome 以外的瀏覽器中實作。因此,Chrome 50 移除了對 <link rel="subresource">
的支援。