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更多詳情：查看