BLOOK

GP's blog and book

link之preload

1
2
3
4
5
6
7
8
9
10
11
12
只是预加载,并不运行。
用下面两种方法即可加载完运行
// 预加载Css
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">
// 预加载js
<link rel="preload" as="script" href="async_script.js"
onload="var script = document.createElement('script');
script.src = this.href;
document.body.appendChild(script);">

参考MDN
参考
DEMO

1
2
3
4
<link rel="prefetch"> 已经被许多浏览器支持了相当长的时间,但它是意图预获取一些资源,
以备下一个导航/页面使用(比如,当你去到下一个页面时)。
这很好,但对当前的页面并没有什么助益。
此外,浏览器会给使用prefetch的资源一个相对较低的优先级——与使用preload的资源相比。毕竟,当前的页面比下一个页面相对更加重要。查看Link prefetching FAQ可以了解更多细节。