preload對比prefetch的功能區別詳解

2022-06-30 18:03:48

一、前言

在使用@vue/cli工具構建的專案，打包上線之後，一般都能看到<link rel="preload">和<link rel="prefetch">這樣的標籤，對於preload與prefetch的作用和區別一直以來都不是太瞭解，所以文字就詳細介紹一下。

想要了解preload與prefetch的作用和區別，就不得不先熟悉瀏覽器載入資源的優先順序。

如圖：

其中HTML基本骨架結構和CSS的優先順序最高
preload 使用 as 屬性載入的資源將會獲得與資源 “type” 屬性所擁有的相同的優先順序。比如說，preload as="style" 將會獲得比 as=“script” 更高的優先順序。
不帶 as 屬性的 preload 的優先順序將會等同於非同步請求。

二、preload

2-1.定義：

<link>元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中<head>元素內部書寫一些宣告式的資源獲取請求，可以指明哪些資源是在頁面載入完成後即刻需要的。
preload 提供了一種宣告式的命令，讓瀏覽器提前載入指定資源(載入後並不執行)，需要執行時再執行。

2-2.好處：

將載入和執行分離開，不阻塞渲染和document的onload事件。
提前載入指定資源，不再出現依賴的font字型隔了一段時間才刷出的情況。

2-3注意：

使用 preload 後，不管資源是否使用都將提前載入。若不確定資源是必定會載入的，則不要錯誤使用 preload，以免出現效能問題。
preload 有 as 屬性，瀏覽器可以設定正確的資源載入優先順序，這種方式可以確保資源根據其重要性依次載入，所以，preload 既不會影響重要資源的載入，又不會讓次要資源影響自身的載入；瀏覽器能根據 as 的值傳送適當的 Accept 頭部資訊；瀏覽器通過 as 值能得知資源型別，因此當獲取的資源相同時，瀏覽器能夠判斷前面獲取的資源是否能重用。
如果忽略 as 屬性，或者錯誤的 as 屬性會使 preload 等同於 XHR 請求，瀏覽器不知道載入的是什麼，因此會賦予此類資源非常低的載入優先順序。
如果對所 preload 的資源不使用明確的 as 屬性，將會導致二次獲取。
preload載入font字型資源不帶 crossorigin 也會二次獲取。

2-4.特殊用法

preload 可以定義資源載入完畢後的回撥函數，如下：

<link rel="preload" href="https://tiven.cn/js/test.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  as="javascript" onload="preloadHandle()">

可以使用preload的樣式表立即生效。

<link rel="preload" href="demo.css" rel="external nofollow"  onload="this.rel=stylesheet">

對於載入跨域的資源，必須加上 crossorigin 屬性。

<link rel="preload" as="style" crossorigin href="https://test.com/css/test.css" rel="external nofollow" >

link標籤還可以接收一個media屬性，進行簡單的媒體查詢。

<link rel="preload" href="https://tiven.cn/img/bg.png" rel="external nofollow"  as="image" media="(max-width: 640px)">

三、prefetch

3-1.定義：

3-2.範例：

<link rel="prefetch" href="./js/01.js" rel="external nofollow" >
<link rel="prefetch" href="./js/02.js" rel="external nofollow" >

四、preload 和 prefetch 的區別

preload 是告訴瀏覽器頁面必定需要的資源，瀏覽器一定會載入這些資源。
prefetch 是告訴瀏覽器頁面可能需要的資源，瀏覽器不一定會載入這些資源。
在VUE SSR生成的頁面中，首頁的資源均使用preload，而路由對應的資源，則使用prefetch。
對於當前頁面很有必要的資源使用 preload，對於可能在將來的頁面中使用的資源使用 prefetch。

注意：使用 preload 和 prefetch 的邏輯可能不是寫到一起，但一旦發生對用一資源 preload 或 prefetch 的話，會帶來雙倍的網路請求。

<link rel="preload"   href="https://tiven.cn/js/test.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  as="javascript">
<link rel="prefetch"  href="https://tiven.cn/js/test.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  as="javascript">

以上就是preload對比prefetch的使用區別詳解的詳細內容，更多關於preload對比prefetch區別的資料請關注it145.com其它相關文章！