您是否曾希望在不延遲網頁的 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">
。