preload對(duì)比prefetch的功能區(qū)別詳解

更新時(shí)間：2022年06月30日 15:30:21 作者：天問(wèn)

這篇文章主要為大家介紹了preload對(duì)比prefetch的使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、前言

在使用@vue/cli工具構(gòu)建的項(xiàng)目，打包上線之后，一般都能看到<link rel="preload">和<link rel="prefetch">這樣的標(biāo)簽，對(duì)于preload與prefetch的作用和區(qū)別一直以來(lái)都不是太了解，所以文本就詳細(xì)介紹一下。

想要了解preload與prefetch的作用和區(qū)別，就不得不先熟悉瀏覽器加載資源的優(yōu)先級(jí)。

如圖：

其中HTML基本骨架結(jié)構(gòu)和CSS的優(yōu)先級(jí)最高
preload 使用 as 屬性加載的資源將會(huì)獲得與資源 “type” 屬性所擁有的相同的優(yōu)先級(jí)。比如說(shuō)，preload as="style" 將會(huì)獲得比 as=“script” 更高的優(yōu)先級(jí)。
不帶 as 屬性的 preload 的優(yōu)先級(jí)將會(huì)等同于異步請(qǐng)求。

二、preload

2-1.定義：

<link>元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁(yè)面中<head>元素內(nèi)部書(shū)寫(xiě)一些聲明式的資源獲取請(qǐng)求，可以指明哪些資源是在頁(yè)面加載完成后即刻需要的。
preload 提供了一種聲明式的命令，讓瀏覽器提前加載指定資源(加載后并不執(zhí)行)，需要執(zhí)行時(shí)再執(zhí)行。

2-2.好處：

將加載和執(zhí)行分離開(kāi)，不阻塞渲染和document的onload事件。
提前加載指定資源，不再出現(xiàn)依賴(lài)的font字體隔了一段時(shí)間才刷出的情況。

2-3注意：

使用 preload 后，不管資源是否使用都將提前加載。若不確定資源是必定會(huì)加載的，則不要錯(cuò)誤使用 preload，以免出現(xiàn)性能問(wèn)題。
preload 有 as 屬性，瀏覽器可以設(shè)置正確的資源加載優(yōu)先級(jí)，這種方式可以確保資源根據(jù)其重要性依次加載，所以，preload 既不會(huì)影響重要資源的加載，又不會(huì)讓次要資源影響自身的加載；瀏覽器能根據(jù) as 的值發(fā)送適當(dāng)?shù)?Accept 頭部信息；瀏覽器通過(guò) as 值能得知資源類(lèi)型，因此當(dāng)獲取的資源相同時(shí)，瀏覽器能夠判斷前面獲取的資源是否能重用。
如果忽略 as 屬性，或者錯(cuò)誤的 as 屬性會(huì)使 preload 等同于 XHR 請(qǐng)求，瀏覽器不知道加載的是什么，因此會(huì)賦予此類(lèi)資源非常低的加載優(yōu)先級(jí)。
如果對(duì)所 preload 的資源不使用明確的 as 屬性，將會(huì)導(dǎo)致二次獲取。
preload加載font字體資源不帶 crossorigin 也會(huì)二次獲取。

2-4.特殊用法

preload 可以定義資源加載完畢后的回調(diào)函數(shù)，如下：

<link rel="preload"  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">

對(duì)于加載跨域的資源，必須加上 crossorigin 屬性。

<link rel="preload" as="style" crossorigin  rel="external nofollow" >

link標(biāo)簽還可以接收一個(gè)media屬性，進(jìn)行簡(jiǎn)單的媒體查詢(xún)。

<link rel="preload"  rel="external nofollow"  as="image" media="(max-width: 640px)">

三、prefetch

3-1.定義：

3-2.實(shí)例：

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

四、preload 和 prefetch 的區(qū)別

preload 是告訴瀏覽器頁(yè)面必定需要的資源，瀏覽器一定會(huì)加載這些資源。
prefetch 是告訴瀏覽器頁(yè)面可能需要的資源，瀏覽器不一定會(huì)加載這些資源。
在VUE SSR生成的頁(yè)面中，首頁(yè)的資源均使用preload，而路由對(duì)應(yīng)的資源，則使用prefetch。
對(duì)于當(dāng)前頁(yè)面很有必要的資源使用 preload，對(duì)于可能在將來(lái)的頁(yè)面中使用的資源使用 prefetch。

注意：使用 preload 和 prefetch 的邏輯可能不是寫(xiě)到一起，但一旦發(fā)生對(duì)用一資源 preload 或 prefetch 的話(huà)，會(huì)帶來(lái)雙倍的網(wǎng)絡(luò)請(qǐng)求。

<link rel="preload"    rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  as="javascript">
<link rel="prefetch"   rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  as="javascript">

以上就是preload對(duì)比prefetch的使用區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于preload對(duì)比prefetch區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: