Preload vs Prefetch

比較 Preload 與 Prefetch 的異同。

使用時機

提早取得…

如下圖,比較使用 Preload 前後的差異,SVG 圖檔的下載優先權是低的,但可透過設定 <link rel=preload as=image href="sprite.symbol.svg"> 提示瀏覽器這是重要的資源而提前下載的時間點。

使用 Preload 前。

使用 Preload 前

使用 Preload 後。

使用 Preload 後

實際測試網站-吃什麼,どっち

瀏覽器支援度

Preload

以 Chrome 和 Safari 為主。

Preload 瀏覽器支援度

圖片來源:Can I use…preload

Prefetch

除了 Safari 和 Opera Mini 以外,Prefetch 受到較廣泛的支援。

Prefetch 瀏覽器支援度

圖片來源:Can I use…prefetch

快取的操作

兩者對快取的操作相同的。

因此,Preload 和 Prefetch 若可搭配快取,就能有更好的效能;但若沒有搭配快取,可能會讓使用者下載根本用不到的資源而造成浪費。

檔案優先權

皆以檔案類型決定下載的優先順序。

Preload 以 as 屬性分辨檔案類型,而 Prefetch 以 type 屬性分辨檔案類型。

基本上,下載順序為 style/font/XHR (sync) > 位於可視區域的圖片 / Preload without as/XHR (async) > favicon、script async/defer/block、不在可視區域的圖片、媒體檔、SVG 等。

檔案優先權

圖片來源:Preload, Prefetch And Priorities in Chrome

重複取檔

造成重複取檔的原因主要是 Preload 和 Prefetch 的誤用或混用,或是沒有設定特定屬性。

檔案下載

<link rel="preload" href="style.css" onload="this.rel=stylesheet">

其他比較

兩者基本上是相同的,唯一不同處是 Link preload header 可能會觸發 HTTP/2 Server Push,因此若不希望觸發 push 可加上 nopush 屬性。

HTTP/2 Server Push vs Preload

參考資料


comments powered by Disqus