html预加载之link标签

咱们以前说起过link rel 里面有preload和prefetch、modulepreload，都是用于预加载资源

<link rel="preload" href="..." as="...">
<link rel="modulepreload" href="...">
<link rel="prefetch" href="...">

注意preload须要写上正确的as属性，才能正常工做喔(prefetch不须要)。

1. 可是preload和prefetch有什么区别呢？

咱们翻看w3c的preload规范，里面有说起：

大体意思就是：

　　preload是用于预加载当前页的资源，浏览器会优先加载它们

　　prefetch是用于预加载后续导航使用的资源，浏览器也会加载它们，但优先级不高

补充：

值得注意的是preload的as若是是video，如今浏览器仍是没有支持，能够改用as=“fetch”替代 或者 video自己的preload="auto"属性代替

<!-- video的preload -->
<video src="..." controls="controls" preload="auto"></video>

<!-- link的preload，as不要写video，由于浏览器尚未支持 -->
<link rel="preload" as="fetch" href="...">
<video src="..." controls="controls"></video>

 2. modulepreload和preload

既然有了preload，为何还有新增一个modulepreload呢？

咱们看到developers.google.com有一篇文章专门介绍modulepreload，里面有一段专门的解释：

大概意思是说，使用link preload来预加载JavaScript Module会有2个问题：

1. 预加载若是是跨域并须要开启credentials模式(跨域带cookies)，会遇到一些麻烦（具体什么麻烦，没太看懂😭）

2. preload没有属性能够提供来辨别这个js资源是一个JavaScript Module，这让浏览器没办法预加载完后立刻处理成JavaScript Module来备用，只能等到调用的时候再处理

modulepreload更多详情：查看