快捷導(dǎo)航

vue前端性能優(yōu)化之預(yù)加載和懶加載示例詳解

更新時(shí)間：2023年02月16日 16:23:33 作者：白水清風(fēng)

這篇文章主要為大家介紹了vue前端性能優(yōu)化之預(yù)加載和懶加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

預(yù)加載

預(yù)加載簡(jiǎn)單來(lái)說(shuō)就是將所有所需的資源提前請(qǐng)求加載到本地，這樣后面在需要用到時(shí)就直接從緩存取資源；我們使用該技術(shù)預(yù)先告知瀏覽器，等下某些資源可能要被使用，先把資源下載下來(lái)，不要等使用的時(shí)候再下載，可以看出這樣的加載技術(shù)會(huì)增加服務(wù)器的壓力，但是用戶的體驗(yàn)會(huì)比較好，因?yàn)榭梢暂^快的看到后面的內(nèi)容。

那看到這里很多問(wèn)題的小明就說(shuō)了，那預(yù)加載那么好用，以后我們就都用預(yù)加載了，服務(wù)器不是問(wèn)題，一個(gè)字買(mǎi)；但如果在一個(gè)資源非常多，頁(yè)面非常長(zhǎng)的電商網(wǎng)站場(chǎng)景中，如淘寶，我們要等待所有的資源都預(yù)加載完，再呈現(xiàn)給用戶么？那用戶估計(jì)會(huì)直接關(guān)閉淘寶打開(kāi)京東；切記，任何一個(gè)技術(shù)都有它適用的場(chǎng)景和不適用的場(chǎng)景，我們要學(xué)會(huì)技術(shù)選型。

圖片預(yù)加載

HTML- img標(biāo)簽

img標(biāo)簽會(huì)在Html渲染解析到的時(shí)候，如果解析到img中src的值，則瀏覽器會(huì)立即開(kāi)啟一個(gè)線程去請(qǐng)求該資源，所以我們可以先將img標(biāo)簽隱藏但src寫(xiě)上對(duì)應(yīng)的鏈接，這樣皆可以把資源先請(qǐng)求回來(lái)了

// 預(yù)加載
<img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" style="display: none" />

Image對(duì)象

const image = new Image()
image.src = "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"

只要瀏覽器把圖片下載到本地，同樣的src就會(huì)使用緩存，這是最基本也是最實(shí)用的預(yù)載方法；除了以上方法還有一些利用 XMLHttpRequest對(duì)象或者第三庫(kù)如PerloadJS庫(kù)來(lái)實(shí)現(xiàn)

JS預(yù)加載

js的加載方式

<script src="index.js"></script>

JS 會(huì)阻塞 dom 渲染，瀏覽器必須等待 index.js 加載和執(zhí)行完成后才能去做其它事情

<script async src="index.js"></script>

async模式下，它的加載時(shí)異步的，JS不會(huì)阻塞DOM渲染，async加載是無(wú)序的，當(dāng)它加載完畢就會(huì)立即執(zhí)行；可以用于與DOM無(wú)關(guān)系的操作，比如埋點(diǎn)統(tǒng)計(jì)

<script defer src="index.js"></script>

defer 模式下，JS 的加載也是異步的，defer資源會(huì)在DOMConentLoaded執(zhí)行之前，并且是有序的；如果多個(gè)script都設(shè)置了defer,會(huì)按引入順序執(zhí)行，如果需要控制資源加載順序時(shí)，可以使用這個(gè)模式，如 element-ui.js 依賴(lài)于 vue，所以必須先引入vue.js，再引入 element-ui.js

<script type="module">import { a } from './a.js'</script>

在主流的現(xiàn)代瀏覽器中，script 標(biāo)簽的屬性可以加上 type="module"，瀏覽器會(huì)對(duì)其內(nèi)部的 import 引用發(fā)起 HTTP 請(qǐng)求，獲取模塊內(nèi)容。這時(shí) script 的行為會(huì)像是 defer 一樣，在后臺(tái)下載，并且等待 DOM 解析

<link rel="preload" as="script" href="index.js" rel="external nofollow"  rel="external nofollow" >

link 標(biāo)簽的 preload 屬性：用于提前加載一些需要的依賴(lài)，這些資源會(huì)優(yōu)先加載;vue2 項(xiàng)目打包生成的 index.html 文件，會(huì)自動(dòng)給首頁(yè)所需要的資源，全部添加 preload，實(shí)現(xiàn)關(guān)鍵資源的提前加載

<link rel="prefetch" as="script" href="index.js" rel="external nofollow"  rel="external nofollow" >

prefetch 是利用瀏覽器的空閑時(shí)間，加載頁(yè)面將來(lái)可能用到的資源的一種機(jī)制；通?？梢杂糜诩虞d其他頁(yè)面（非首頁(yè)）所需要的資源，以便加快后續(xù)頁(yè)面的打開(kāi)速度

async、defer 是 script 標(biāo)簽的專(zhuān)屬屬性，對(duì)于網(wǎng)頁(yè)中的其他資源，可以通過(guò) link 的 preload、prefetch 屬性來(lái)預(yù)加載如今現(xiàn)代框架已經(jīng)將 preload、prefetch 添加到打包流程中了，通過(guò)靈活的配置，去使用這些預(yù)加載功能，同時(shí)我們也可以審時(shí)度勢(shì)地向 script 標(biāo)簽添加 async、defer 屬性去處理資源，這樣可以顯著提升性能

preload

<!-- 使用 link 標(biāo)簽靜態(tài)標(biāo)記需要預(yù)加載的資源 -->
<link rel="preload" href="/path/to/style.css" rel="external nofollow"  as="style">
?
<!-- 或使用腳本動(dòng)態(tài)創(chuàng)建一個(gè) link 標(biāo)簽后插入到 head 頭部 -->
<script>
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
</script>

preload 提供了一種聲明式的命令，能讓瀏覽器提前加載指定資源（如腳本或者樣式表），并在需要執(zhí)行的時(shí)候再執(zhí)行。這在希望加快某個(gè)資源的加載速度時(shí)很有用。在 preload 下載完資源后，資源只是被緩存起來(lái)，瀏覽器不會(huì)對(duì)其執(zhí)行任何操作。不執(zhí)行腳本，不應(yīng)用樣式表。

注意：設(shè)置了 rel 屬性的 link 標(biāo)簽必須設(shè)置 as屬性來(lái)聲明資源的類(lèi)型，否則瀏覽器可能無(wú)法正確加載資源。常見(jiàn)的 as 屬性包括:

script: JavaScript 文件
style: CSS 樣式文件
font: 字體文件
image: 圖片文件
fetch: 通過(guò) fetch 或者 XHR 獲取的文件，例如 ArrayBuffer 或者 JSON 文件。

prefetch

 <link rel="prefetch" href="static/img/delay_load_img.a5bb7c33.png" rel="external nofollow" >

prefetch (鏈接預(yù)取）是一種瀏覽器機(jī)制，其利用瀏覽器空閑時(shí)間來(lái)下載或預(yù)取用戶在不久的將來(lái)可能訪問(wèn)的文檔。網(wǎng)頁(yè)向?yàn)g覽器提供一組預(yù)取提示，并在瀏覽器完成當(dāng)前頁(yè)面的加載后開(kāi)始靜默地拉取指定的文檔并將其存儲(chǔ)在緩存中。當(dāng)用戶訪問(wèn)其中一個(gè)預(yù)取文檔時(shí)，便可以快速的從瀏覽器緩存中得到。prefetch 是一個(gè)低優(yōu)先級(jí)的資源提示，允許瀏覽器在后臺(tái)空閑時(shí)獲將來(lái)可能用得到的資源，并且將他們存儲(chǔ)在瀏覽器的緩存中。一旦一個(gè)頁(yè)面加載完畢就會(huì)開(kāi)始下載其他的資源，然后當(dāng)用戶點(diǎn)擊了一個(gè)帶有 prefetched 的連接，它將可以立刻從緩存中加載內(nèi)容。

Preload & Prefetch 的區(qū)別

preload的設(shè)計(jì)初衷是為了盡早加載首屏需要的關(guān)鍵資源，從而提升頁(yè)面渲染性能;preload 是告訴瀏覽器頁(yè)面必定需要的資源，瀏覽器一定會(huì)加載這些資源
prefetch 聲明的是將來(lái)可能訪問(wèn)的資源，因此適合對(duì)異步加載的模塊、可能跳轉(zhuǎn)到的其他路由頁(yè)面進(jìn)行資源緩存,瀏覽器不一定會(huì)加載這些資源
大部分場(chǎng)景下無(wú)需特意使用 preload;類(lèi)似字體文件這種隱藏在腳本、樣式中的首屏關(guān)鍵資源，建議使用 preload；
異步加載的模塊（典型的如單頁(yè)系統(tǒng)中的非首頁(yè)）建議使用 prefetch,大概率即將被訪問(wèn)到的資源可以使用 prefetch 提升性能和體驗(yàn)
注：preload 和 prefetch 混用的話，并不會(huì)復(fù)用資源，而是會(huì)重復(fù)加載。

不同資源加載的優(yōu)先級(jí)規(guī)則

DevTools Priority 體現(xiàn)的優(yōu)先級(jí)，一共分成五個(gè)級(jí)別：

Highest 最高
Hight 高
Medium 中等
Low 低
Lowest 最低

其中

html 主要資源，其優(yōu)先級(jí)是最高的
css 樣式資源，其優(yōu)先級(jí)也是最高的
script 腳本資源，優(yōu)先級(jí)不一
font 字體資源，優(yōu)先級(jí)不一

懶加載

懶加載也叫延遲加載；頁(yè)面加載速度快、可以減輕服務(wù)器的壓力、節(jié)約了流量,用戶體驗(yàn)好；

懶加載的幾種實(shí)現(xiàn)方式

純粹的延遲加載，使用setTimeOut或setInterval進(jìn)行加載延遲.
條件加載，符合某些條件，或觸發(fā)了某些事件才開(kāi)始異步下載
可視區(qū)加載，即僅加載用戶可以看到的區(qū)域，這個(gè)主要由監(jiān)控滾動(dòng)條來(lái)實(shí)現(xiàn)

圖片懶加載

對(duì)于一些圖片比較多的頁(yè)面，用戶打開(kāi)頁(yè)面后，只需要呈現(xiàn)出在屏幕可視區(qū)域內(nèi)的圖片，當(dāng)用戶滑動(dòng)頁(yè)面時(shí)，再去加載出現(xiàn)在屏幕內(nèi)的圖片，以?xún)?yōu)化頁(yè)面的加載效果；

實(shí)現(xiàn)：頁(yè)面中的img元素，如果沒(méi)有src屬性，瀏覽器就不會(huì)發(fā)出請(qǐng)求去下載圖片，只有通過(guò)javascript設(shè)置了圖片路徑，瀏覽器才會(huì)發(fā)送請(qǐng)求。懶加載的原理就是先在頁(yè)面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位，把正真的路徑存在元素的“data-url”（這個(gè)名字起個(gè)自己認(rèn)識(shí)好記的就行）屬性里，要用的時(shí)候就取出來(lái)，再設(shè)置。

獲取屏幕可視窗口大小的幾種方法

window.innerHeight // 標(biāo)準(zhǔn)瀏覽器及IE9+ 
document.documentElement.clientHeight // 標(biāo)準(zhǔn)瀏覽器及低版本IE標(biāo)準(zhǔn)模式
document.body.clientHeight &nbsp;// 低版本混雜模式

獲取瀏覽器窗口頂部與文檔頂部之間的距離，即滾動(dòng)條滾動(dòng)的距離

window.pagYoffset // 標(biāo)準(zhǔn)瀏覽器及IE9+
document.documentElement.scrollTop // 兼容ie低版本的標(biāo)準(zhǔn)模式 
document.body.scrollTop // 兼容混雜模式；

路由懶加載

在SPA應(yīng)用中，一個(gè)路由對(duì)應(yīng)一個(gè)頁(yè)面，如果我們不做任何處理，項(xiàng)目打包時(shí)，所有的頁(yè)面都會(huì)打包成一個(gè)文件，當(dāng)用戶去打開(kāi)首頁(yè)時(shí)，就會(huì)去一次性加載所有的資源，這樣首頁(yè)加載就會(huì)慢，降低用戶體驗(yàn)，那有什么辦法不一次性加載所有資源？是用什么原理實(shí)現(xiàn)的？

在ES6中，有一個(gè)動(dòng)態(tài)加載模塊的方法：import()；懶加載就是根據(jù)import()去實(shí)現(xiàn)的，調(diào)用import()之處，被作為分離模塊的起點(diǎn)，意思是，被請(qǐng)求的模塊和它引用的所有子模塊，會(huì)被分離到一個(gè)單獨(dú)chunk中；所以實(shí)現(xiàn)懶加載的方法，就是將需要進(jìn)行懶加載的子模塊分離出來(lái)，打包成一個(gè)單獨(dú)的文件，這樣就不會(huì)一次加載所有的資源了；

// 通過(guò)webpackChunkName設(shè)置分割后代碼塊的名字
const Home = () => import(/* webpackChunkName: "home" */ "@/views/home/index.vue");
const MetricGroup = () => import(/* webpackChunkName: "metricGroup" */ "@/views/metricGroup/index.vue");
?
const routes = [
    {
       path: "/",
       name: "home",
       component: Home
    },
    {
       path: "/metricGroup",
       name: "metricGroup",
       component: MetricGroup
    },
 ]

注：webpackChunkName 作用是 webpack 在打包的時(shí)候，對(duì)異步引入的庫(kù)代碼（lodash）進(jìn)行代碼分割時(shí)，設(shè)置代碼塊的名字。webpack 會(huì)將任何一個(gè)異步模塊與相同的塊名稱(chēng)組合到相同的異步塊中

組件懶加載

這個(gè)實(shí)現(xiàn)原理和路由懶加載是一樣的，都是通過(guò)import()的方式實(shí)現(xiàn)的，那組件懶加載什么時(shí)候用呢？

假設(shè)有兩個(gè)復(fù)雜頁(yè)面都使用到了同一個(gè)組件，項(xiàng)目打包后，發(fā)現(xiàn)兩個(gè)頁(yè)面均包括了該組件的代碼；且該組件又不是一進(jìn)入頁(yè)面就觸發(fā)的，需要一定條件才觸發(fā)的；這個(gè)時(shí)候就比較適合使用組件懶加載；即組件懶加載的使用場(chǎng)景有：