preload
作用
preload 提供了一種聲明式的命令，讓瀏覽器提前加載指定資源(加載后并不執(zhí)行)逢慌，需要執(zhí)行時再執(zhí)行
這樣做的好處在于：
1悠轩、將加載和執(zhí)行分離開，不阻塞渲染和document的onload事件
2攻泼、提前加載指定資源火架，不再出現(xiàn)依賴的font字體隔了一段時間才刷出的情況
使用
1.使用link標簽
簡單的例子：
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style" crossorigin="anonymous">
<link rel="preload" href="main.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js"></script>
</body>
其中：
預(yù)加載：
<link rel="preload" href="main.js" as="script" crossorigin="anonymous">
實際執(zhí)行：
<script src="main.js"></script>
rel="preload"：這種做法將把<link>元素塞入一個預(yù)加載器中，這個預(yù)加載器也將用于其他我們所需要的忙菠，各種各樣的何鸡，任意類型的資源。href：被預(yù)加載資源的資源路徑as：指定將要預(yù)加載的內(nèi)容的類型牛欢，將使得瀏覽器能夠更精確地優(yōu)化資源加載優(yōu)先級骡男。-
跨域獲取需設(shè)置
crossorigin屬性:crossorigin="anonymous"- 如果你需要獲取的是字體文件，那么即使是非跨域的情況下傍睹，也需要應(yīng)用這一屬性隔盛。
2.動態(tài)創(chuàng)建標簽
除了使用link標簽靜態(tài)標記的方式來預(yù)加載資源之外犹菱，還可以以腳本化的方式動態(tài)創(chuàng)建標簽，執(zhí)行這些預(yù)加載操作
預(yù)加載：
var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
執(zhí)行：
var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
注意
使用 preload 后吮炕，不管資源是否使用都將提前加載腊脱。若不確定資源是必定會加載的，則不要錯誤使用 preload龙亲，以免本末導致陕凹，給頁面帶來更沉重的負擔
沒有用到的 preload 資源在 Chrome 的 console 里會在 onload 事件 3s 后發(fā)生警告
prefetch
<link rel=“prefetch”>
它的作用是告訴瀏覽器加載下一頁面可能會用到的資源，注意鳄炉，是下一頁面杜耙，而不是當前頁面。因此該方法的加載優(yōu)先級非常低拂盯，也就是說該方式的作用是加速下一個頁面的加載速度
- preload 是告訴瀏覽器頁面必定需要的資源泥技，瀏覽器一定會加載這些資源
- prefetch 是告訴瀏覽器頁面可能需要的資源，瀏覽器不一定會加載這些資源
參考：
通過rel="preload"進行內(nèi)容預(yù)加載
資源預(yù)加載preload和資源預(yù)讀取prefetch簡明學習
