使用 link rel='preload' 确定资源优先级
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
您有没有想过让浏览器知道重要的字体、脚本或
网页所需的其他资源
onload
事件?<link rel="preload">
让 Web 开发者能够
使用熟悉的 HTML 元素语法和几个关键属性
以确定确切行为这是一个
草稿标准,则包含在
Chrome 50 版本。
通过 <link rel="preload">
加载的资源存储在本地浏览器中,
并且实际上会处于休眠状态,直到在 DOM、JavaScript 或
CSS。例如,这里有一个潜在的应用场景,
已预加载,但并未立即执行,
通过 <script>
标记包含在 DOM 中。
<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
属性应
因为这是 Web 开发者所用的标准属性,
任何链接资源的网址。
as
属性为
不过,您可能不熟悉,并且它用于 <link>
元素上下文
为浏览器提供更多有关
目的地,共
正在发出预加载请求。这些附加信息可确保
浏览器会设置相应的请求标头、请求优先级,
任何相关的内容安全政策
可能针对正确的资源上下文而设的指令。
学习(大量)更多内容
Yoav Weiss 写道
权威指南
到使用 <link rel="preload">
。如果您感兴趣并想要开始使用
建议您仔细阅读他的文章,详细了解
优势和创意使用场景。
<link rel="subresource">
,再见
<link rel="preload">
取代了 <link rel="subresource">
,后者
存在明显的错误和缺点
Chrome 之外的浏览器中从未实现过。因此,Chrome 50
停止支持对
<link rel="subresource">
。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):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": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2016-03-13\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"]],["最后更新时间 (UTC):2016-03-13。"],[],[]]