欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年06月30日 15:30:21   作者:天問  
這篇文章主要為大家介紹了preload對(duì)比prefetch的使用區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一、前言

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

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

如圖:

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

二、preload

2-1.定義:

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

2-2.好處:

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

2-3注意:

  • 使用 preload 后,不管資源是否使用都將提前加載。若不確定資源是必定會(huì)加載的,則不要錯(cuò)誤使用 preload,以免出現(xiàn)性能問題。
  • preload 有 as 屬性,瀏覽器可以設(shè)置正確的資源加載優(yōu)先級(jí),這種方式可以確保資源根據(jù)其重要性依次加載, 所以,preload 既不會(huì)影響重要資源的加載,又不會(huì)讓次要資源影響自身的加載;瀏覽器能根據(jù) as 的值發(fā)送適當(dāng)?shù)?Accept 頭部信息;瀏覽器通過 as 值能得知資源類型,因此當(dāng)獲取的資源相同時(shí),瀏覽器能夠判斷前面獲取的資源是否能重用。
  • 如果忽略 as 屬性,或者錯(cuò)誤的 as 屬性會(huì)使 preload 等同于 XHR 請(qǐng)求,瀏覽器不知道加載的是什么,因此會(huì)賦予此類資源非常低的加載優(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)單的媒體查詢。
<link rel="preload"  rel="external nofollow"  as="image" media="(max-width: 640px)">

三、prefetch

3-1.定義:

<link>元素的 rel 屬性的屬性值prefetch能夠讓你在你的HTML頁面中<head>元素內(nèi)部書寫一些聲明式的資源獲取請(qǐng)求,告訴瀏覽器加載下一頁面可能會(huì)用到的資源,注意是下一頁面,而不是當(dāng)前頁面。因此該方法的加載優(yōu)先級(jí)非常低,也就是說該方式的作用是加速下一個(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 是告訴瀏覽器頁面必定需要的資源,瀏覽器一定會(huì)加載這些資源。
  • prefetch 是告訴瀏覽器頁面可能需要的資源,瀏覽器不一定會(huì)加載這些資源。
  • 在VUE SSR生成的頁面中,首頁的資源均使用preload,而路由對(duì)應(yīng)的資源,則使用prefetch。
  • 對(duì)于當(dāng)前頁面很有必要的資源使用 preload,對(duì)于可能在將來的頁面中使用的資源使用 prefetch。

注意: 使用 preload 和 prefetch 的邏輯可能不是寫到一起,但一旦發(fā)生對(duì)用一資源 preload 或 prefetch 的話,會(huì)帶來雙倍的網(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)文章!

相關(guān)文章

  • Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)

    Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng)

    this.$set()和Vue.set()本質(zhì)方法一樣,前者可以用在methods中使用。這篇文章主要介紹了Vue.set() this.$set()引發(fā)的視圖更新思考及注意事項(xiàng),需要的朋友可以參考下
    2018-08-08
  • vue中router.beforeEach()的簡(jiǎn)單用法舉例

    vue中router.beforeEach()的簡(jiǎn)單用法舉例

    router.beforeEach()一般用來做一些進(jìn)入頁面的限制,比如沒有登錄,就不能進(jìn)入某些頁面,只有登錄了之后才有權(quán)限查看某些頁面,下面這篇文章主要給大家介紹了關(guān)于vue中router.beforeEach()的簡(jiǎn)單用法舉例,需要的朋友可以參考下
    2023-01-01
  • 封裝Vue Element的table表格組件的示例詳解

    封裝Vue Element的table表格組件的示例詳解

    這篇文章主要介紹了封裝Vue Element的table表格組件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2020-08-08
  • Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題

    Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題

    這篇文章主要介紹了Vue項(xiàng)目使用CDN優(yōu)化首屏加載問題,本文以vue、vuex、vue-touter為例,給大家介紹處理流程,需要的朋友可以參考下
    2018-04-04
  • Vue編譯器AST抽象語法樹源碼分析

    Vue編譯器AST抽象語法樹源碼分析

    這篇文章主要為大家介紹了Vue編譯器AST抽象語法樹源碼分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • Vue全局事件總線和訂閱與發(fā)布使用案例分析講解

    Vue全局事件總線和訂閱與發(fā)布使用案例分析講解

    在?vue?里我們可以通過全局事件總線來實(shí)現(xiàn)任意組件之間通信,它的原理是給?Vue?的原型對(duì)象上面添加一個(gè)屬性。這樣的話我所有組件的都可以訪問到這個(gè)屬性,然后可以通過這個(gè)屬性來訪問其他組件給這個(gè)屬性上面綁定的一些方法,從而去傳遞數(shù)據(jù)
    2022-08-08
  • Vue+Element的后臺(tái)管理框架的整合實(shí)踐

    Vue+Element的后臺(tái)管理框架的整合實(shí)踐

    本文主要介紹了Vue+Element的后臺(tái)管理框架,在框架上,領(lǐng)導(dǎo)要用AdminLTE這套模板,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例

    vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例

    今天小編就為大家分享一篇vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 在?Vue?中使用?iframe?嵌套頁面的步驟

    在?Vue?中使用?iframe?嵌套頁面的步驟

    這篇文章主要介紹了在?Vue?中使用?iframe?嵌套頁面,使用?iframe?技術(shù)可以實(shí)現(xiàn)多個(gè)頁面之間的數(shù)據(jù)傳遞和交互,提高了網(wǎng)站的整體性能和用戶體驗(yàn),需要的朋友可以參考下
    2023-05-05
  • 詳解vue文件中使用echarts.js的兩種方式

    詳解vue文件中使用echarts.js的兩種方式

    這篇文章主要介紹了詳解vue文件中使用echarts.js的兩種方式,主要介紹了兩種使用方式,一種是以組件的形式另一種直接引入,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-10-10

最新評(píng)論