preload對比prefetch的功能區(qū)別詳解
更新時(shí)間：2022年06月30日 15:30:21 作者：天問
這篇文章主要為大家介紹了preload對比prefetch的使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
一、前言
在使用@vue/cli工具構(gòu)建的項(xiàng)目，打包上線之后，一般都能看到<link rel="preload">和<link rel="prefetch">這樣的標(biāo)簽，對于preload與prefetch的作用和區(qū)別一直以來都不是太了解，所以文本就詳細(xì)介紹一下。
想要了解preload與prefetch的作用和區(qū)別，就不得不先熟悉瀏覽器加載資源的優(yōu)先級。
如圖：
- 其中HTML基本骨架結(jié)構(gòu)和CSS的優(yōu)先級最高
- preload 使用 as 屬性加載的資源將會獲得與資源 “type” 屬性所擁有的相同的優(yōu)先級。比如說，preload as="style" 將會獲得比 as=“script” 更高的優(yōu)先級。
- 不帶 as 屬性的 preload 的優(yōu)先級將會等同于異步請求。
二、preload
2-1.定義：
- <link>元素的 rel 屬性的屬性值preload能夠讓你在你的HTML頁面中<head>元素內(nèi)部書寫一些聲明式的資源獲取請求，可以指明哪些資源是在頁面加載完成后即刻需要的。
- preload 提供了一種聲明式的命令，讓瀏覽器提前加載指定資源(加載后并不執(zhí)行)，需要執(zhí)行時(shí)再執(zhí)行。
2-2.好處：
- 將加載和執(zhí)行分離開，不阻塞渲染和document的onload事件。
- 提前加載指定資源，不再出現(xiàn)依賴的font字體隔了一段時(shí)間才刷出的情況。
2-3注意：
- 使用 preload 后，不管資源是否使用都將提前加載。若不確定資源是必定會加載的，則不要錯(cuò)誤使用 preload，以免出現(xiàn)性能問題。
- preload 有 as 屬性，瀏覽器可以設(shè)置正確的資源加載優(yōu)先級，這種方式可以確保資源根據(jù)其重要性依次加載， 所以，preload 既不會影響重要資源的加載，又不會讓次要資源影響自身的加載；瀏覽器能根據(jù) as 的值發(fā)送適當(dāng)?shù)?Accept 頭部信息；瀏覽器通過 as 值能得知資源類型，因此當(dāng)獲取的資源相同時(shí)，瀏覽器能夠判斷前面獲取的資源是否能重用。
- 如果忽略 as 屬性，或者錯(cuò)誤的 as 屬性會使 preload 等同于 XHR 請求，瀏覽器不知道加載的是什么，因此會賦予此類資源非常低的加載優(yōu)先級。
- 如果對所 preload 的資源不使用明確的 as 屬性，將會導(dǎo)致二次獲取。
- preload加載font字體資源不帶 crossorigin 也會二次獲取。
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">
- 對于加載跨域的資源，必須加上 crossorigin 屬性。
<link rel="preload" as="style" crossorigin rel="external nofollow" >
- link標(biāo)簽還可以接收一個(gè)media屬性，進(jìn)行簡單的媒體查詢。
<link rel="preload" rel="external nofollow" as="image" media="(max-width: 640px)">
三、prefetch
3-1.定義：
<link>元素的 rel 屬性的屬性值prefetch能夠讓你在你的HTML頁面中<head>元素內(nèi)部書寫一些聲明式的資源獲取請求，告訴瀏覽器加載下一頁面可能會用到的資源，注意是下一頁面，而不是當(dāng)前頁面。因此該方法的加載優(yōu)先級非常低，也就是說該方式的作用是加速下一個(gè)頁面的加載速度。
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 是告訴瀏覽器頁面必定需要的資源，瀏覽器一定會加載這些資源。
- prefetch 是告訴瀏覽器頁面可能需要的資源，瀏覽器不一定會加載這些資源。
- 在VUE SSR生成的頁面中，首頁的資源均使用preload，而路由對應(yīng)的資源，則使用prefetch。
- 對于當(dāng)前頁面很有必要的資源使用 preload，對于可能在將來的頁面中使用的資源使用 prefetch。
注意： 使用 preload 和 prefetch 的邏輯可能不是寫到一起，但一旦發(fā)生對用一資源 preload 或 prefetch 的話，會帶來雙倍的網(wǎng)絡(luò)請求。
<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對比prefetch的使用區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于preload對比prefetch區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)
這篇文章主要介紹了使用van-picker?動(dòng)態(tài)設(shè)置當(dāng)前選中項(xiàng)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶復(fù)選框的樹形菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
Vue項(xiàng)目全局配置頁面緩存之按需讀取緩存的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目全局配置頁面緩存之實(shí)現(xiàn)按需讀取緩存的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧2018-08-08
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學(xué)習(xí),這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個(gè)Vue項(xiàng)目的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue?elementUI?處理文件批量上傳方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue路由攔截器和請求攔截器知識點(diǎn)總結(jié)
在本篇文章里小編給各位整理的是一篇關(guān)于vue路由攔截器和請求攔截器知識點(diǎn)總結(jié)文章，有興趣的朋友們學(xué)習(xí)下。2019-11-11
vue自定義指令(2.x丨3.x)可以幫助我們實(shí)現(xiàn)需要操作，比如防抖、節(jié)流、懶加載、輸入框自動(dòng)聚焦等等，使用起來非常方便，比如vue自帶的v-text、v-html、v-show、v-if等等,這篇文章主要介紹了vue2.x與vue3.x中自定義指令詳解,需要的朋友可以參考下2022-12-12
vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證
這篇文章主要介紹了vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vite搭建vue2項(xiàng)目的實(shí)戰(zhàn)過程
自從體驗(yàn)了一下vite之后,真的太快了,然而對vue3還不是很熟練,就想著在vue2的項(xiàng)目中使用以下vite,下面這篇文章主要給大家介紹了關(guān)于vite搭建vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue使用echarts實(shí)現(xiàn)中國地圖和點(diǎn)擊省份進(jìn)行查看功能
這篇文章主要介紹了vue使用echarts實(shí)現(xiàn)中國地圖和點(diǎn)擊省份進(jìn)行查看功能,本文通過實(shí)例代碼給大家詳細(xì)講解，對vue echarts 中國地圖相關(guān)知識感興趣的朋友一起看看吧2022-12-12