預(yù)加載

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

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

圖片預(yù)加載

HTML- img標(biāo)簽

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

// 預(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ì)象或者第三庫如PerloadJS庫來實(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加載是無序的，當(dāng)它加載完畢就會(huì)立即執(zhí)行；可以用于與DOM無關(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 依賴于 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 屬性：用于提前加載一些需要的依賴，這些資源會(huì)優(yōu)先加載;vue2 項(xiàng)目打包生成的 index.html 文件，會(huì)自動(dòng)給首頁所需要的資源，全部添加 preload，實(shí)現(xiàn)關(guān)鍵資源的提前加載

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

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

async、defer 是 script 標(biāo)簽的專屬屬性，對(duì)于網(wǎng)頁中的其他資源，可以通過 link 的 preload、prefetch 屬性來預(yù)加載如今現(xiàn)代框架已經(jīng)將 preload、prefetch 添加到打包流程中了，通過靈活的配置，去使用這些預(yù)加載功能，同時(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 下載完資源后，資源只是被緩存起來，瀏覽器不會(huì)對(duì)其執(zhí)行任何操作。不執(zhí)行腳本，不應(yīng)用樣式表。

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

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

prefetch

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

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

Preload & Prefetch 的區(qū)別

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

懶加載

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

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

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

圖片懶加載

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

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

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

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

獲取瀏覽器窗口頂部與文檔頂部之間的距離，即滾動(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è)頁面，如果我們不做任何處理，項(xiàng)目打包時(shí)，所有的頁面都會(huì)打包成一個(gè)文件，當(dāng)用戶去打開首頁時(shí)，就會(huì)去一次性加載所有的資源，這樣首頁加載就會(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)行懶加載的子模塊分離出來，打包成一個(gè)單獨(dú)的文件，這樣就不會(huì)一次加載所有的資源了；

// 通過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ì)異步引入的庫代碼（lodash）進(jìn)行代碼分割時(shí)，設(shè)置代碼塊的名字。webpack 會(huì)將任何一個(gè)異步模塊與相同的塊名稱組合到相同的異步塊中

組件懶加載

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

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

• 該頁面文件體積大，導(dǎo)致頁面打開慢，可以通過懶加載進(jìn)行資源拆分，利用瀏覽器的并行下載提升速度
• 該組件又不是一進(jìn)入頁面就觸發(fā)的，需要一定條件才觸發(fā)的（比如彈窗）
• 該組件復(fù)用性高，很多頁面引用，可以理由懶加載單獨(dú)形成一個(gè)文件

其他時(shí)候不建議拆分過細(xì)，因?yàn)闀?huì)造成瀏覽器http請(qǐng)求增多；

最后

預(yù)加載和懶加載都有各自的優(yōu)缺點(diǎn)，我們要根據(jù)不同的情況選擇不同的技術(shù)去解決問題。

以上就是vue前端性能優(yōu)化之預(yù)加載和懶加載示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue前端預(yù)加載懶加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論