使用 rel#39;preload' 連結為您的資源排定優先順序;
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
您是否曾經想讓瀏覽器知道某個重要的字型、指令碼或
而不需延遲網頁
要onload
事件嗎?<link rel="preload">
讓網頁程式開發人員就能做到
方法,使用熟悉的 HTML 元素語法和幾個重要屬性
判斷確切行為這是
草稿標準
Chrome 50 版。
透過 <link rel="preload">
載入的資源會儲存在本機瀏覽器中
且有效的識別碼,直到在 DOM、JavaScript 或
例如 CSS、CSS、CSS 和 JS。舉例來說,指令碼檔案
容器不會立即執行
透過 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">
。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2016-03-13 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2016-03-13 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2016-03-13 (世界標準時間)。"],[],[]]