zwhd2013背景
<link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。相关文档
一般情况下 <link>用来记载css文件
<link rel=”stylesheet” href=”styles/main.css”>
在预加载的时候link作为预加载的容器,href指定预加载的路径,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: 视频文件。
优点
更精确地优化资源加载优先级。
匹配未来的加载需求，在适当的情况下，重复利用同一资源。
为资源应用正确的内容安全策略。
为资源设置正确的 Accept 请求头。
加载css以及js
<head>
<meta charset=”utf-8″>
<title>JS and CSS preload example</title>
<link rel=”preload” href=”style.css” as=”style”>
<link rel=”preload” href=”main.js” as=”script”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src=”main.js”></script>
</body>
加载MIME类型
<head>
<meta charset=”utf-8″>
<title>Video preload example</title>
<link rel=”preload” href=”sintel-short.mp4″ as=”video” type=”video/mp4″>
</head>
<body>
<video controls>
<source src=”sintel-short.mp4″ type=”video/mp4″>
<source src=”sintel-short.webm” type=”video/webm”>
<p>Your browser doesn’t support HTML5 video. Here is a <a href=”sintel-short.mp4″>link to the video</a> instead.</p>
</video>
</body>
跨域加载文件
<head>
<meta charset=”utf-8″>
<title>Web font example</title>
<link rel=”preload” href=”fonts/cicle_fina-webfont.eot” as=”font” type=”application/vnd.ms-fontobject” crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/cicle_fina-webfont.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/cicle_fina-webfont.woff” as=”font” type=”font/woff” crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/cicle_fina-webfont.ttf” as=”font” type=”font/ttf” crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/cicle_fina-webfont.svg” as=”font” type=”image/svg+xml” crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/zantroke-webfont.eot” as=”font” type=”application/vnd.ms-fontobject” crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/zantroke-webfont.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/zantroke-webfont.woff” as=”font” type=”font/woff” crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/zantroke-webfont.ttf” as=”font” type=”font/ttf” crossorigin=”anonymous”>
<link rel=”preload” href=”fonts/zantroke-webfont.svg” as=”font” type=”image/svg+xml” crossorigin=”anonymous”>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
…
</body>
其他更详细的解说,参考: 通过rel=”preload”进行内容预加载
————————————————
版权声明：本文为CSDN博主「WX_安琪拉打野怪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42011096/article/details/106762325
