<link>元素的 rel 属性的属性值preload能够让HTML页面中 <head>元素内部书写一些声明式的资源获取请求，使得资源可以更早的得到加载。
<link rel="stylesheet" href="style2.css">
<script src="main2.js"></script>
<link rel="preload" href="style1.css" as="style">
<link rel="preload" href="main1.js" as="script">在这里，我们会先加载style1.css和main1.js文件(但不会生效)，在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。
哪些类型的内容可以被预加载？
许多不同类型的内容都可以被预加载，一些主要可用的as 属性值列举如下：
audio: 音频文件。document: 一个将要被嵌入到<frame>或<iframe>内部的HTML文档。embed: 一个将要被嵌入到<embed>元素内部的资源。fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。font: 字体文件。image: 图片文件。object: 一个将会被嵌入到<embed>元素内的文件。script: JavaScript文件。style: 样式表。track: WebVTT文件。worker: 一个JavaScript的web worker或shared worker。video: 视频文件。
媒体查询
<link>元素有一个很棒的特性是它们能够接受一个media作为属性值，这将令你能够使用响应式的预加载
<link rel="preload" href="narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="wide.png" as="image" media="(min-width: 601px)">跨域获取
通过添加crossorigin="anonymous"支持跨域,对于字体文件是个特例,无论何时,字体文件都需要添加该属性
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">其他资源预加载机制
<link rel="prefetch">已经被许多浏览器支持了相当长的时间，它是意图预获取一些资源，以备下一个导航/页面使用。这很好，但对当前的页面并没有什么助益。此外，浏览器会给使用prefetch的资源一个相对较低的优先级——与使用preload的资源相比。
查看Link prefetching FAQ可以了解更多细节。
原文地址:https://blog.csdn.net/huxyc/article/details/128190716
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_20880.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
