prefetch 和preload_preload和prefetch

1、 preload和prefetch的出現為我們提供了可以更加細粒度地控制浏覽器加載資源的方法

2、 preload：

link标簽的preload是一種聲明式的資源擷取請求方式，用于提前加載一些需要的依賴，并且不會影響頁面的onload事件；使用方式如下：

// css加載後立即生效

其中，rel屬性值為preload；as屬性用于規定資源的類型，并根據資源類型設定Accep請求頭，以便能夠使用正常的政策去請求對應的資源；href為資源請求位址；onload和onerror則分别是資源加載成功和失敗後的回調函數；

其中as的值可以取style、script、image、font、fetch、document、audio、video等；如果as屬性被省略，那麼該請求将會當做異步請求處理；

另外，在請求跨域資源時推薦加上crossorigin屬性，否則可能會導緻資源的二次加載(尤其是font資源)；

preload特點：

preload加載的資源是在浏覽器渲染機制之前進行處理的，并且不會阻塞onload事件；

preload可以支援加載多種類型的資源，并且可以加載跨域資源；

preload加載的js腳本其加載和執行的過程是分離的。即preload會預加載相應的腳本代碼，待到需要時自行調用；

3、prefetch：

prefetch是一種利用浏覽器的空閑時間加載頁面将來可能用到的資源的一種機制；通常可以用于加載非首頁的其他頁面所需要的資源，以便加快後續頁面的首屏速度；

prefetch特點

prefetch加載的資源可以擷取非目前頁面所需要的資源，并且将其放入緩存至少5分鐘(無論資源是否可以緩存)；并且，當頁面跳轉時，未完成的prefetch請求不會被中斷；

4、對比：

緩存：

Chrome有四種緩存：http cache、memory cache、Service Worker cache和Push cache。在preload或prefetch的資源加載時，兩者均存儲在http cache。當      資源加載完成後，如果資源是可以被緩存的，那麼其被存儲在http cache中等待後續使用；如果資源不可被緩存，那麼其在被使用前均存儲在memory     cache；

preload和prefetch都沒有同域名的限制；

preload主要用于預加載目前頁面需要的資源；而prefetch主要用于加載将來頁面可能需要的資源；

不論資源是否可以緩存，prefecth會存儲在net-stack cache中至少5分鐘；

p    reload需要使用as屬性指定特定的資源類型以便浏覽器為其配置設定一定的優先級，并能夠正确加載資源；

5、屬性是否支援檢測：

const preloadSupported = () => {

const link = document.createElement('link');

const relList = link.relList;

if (!relList || relList.supports)

return false;

return relList.supports('preload');

}