預(yù)加載

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

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

圖片預(yù)加載

HTML- img標(biāo)簽

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

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

Image對象

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

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

JS預(yù)加載

js的加載方式

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

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

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

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

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

defer 模式下，JS 的加載也是異步的，defer資源會在DOMConentLoaded執(zhí)行之前，并且是有序的；如果多個script都設(shè)置了defer,會按引入順序執(zhí)行，如果需要控制資源加載順序時，可以使用這個模式，如 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"，瀏覽器會對其內(nèi)部的 import 引用發(fā)起 HTTP 請求，獲取模塊內(nèi)容。這時 script 的行為會像是 defer 一樣，在后臺下載，并且等待 DOM 解析

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

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

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

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

async、defer 是 script 標(biāo)簽的專屬屬性，對于網(wǎng)頁中的其他資源，可以通過 link 的 preload、prefetch 屬性來預(yù)加載如今現(xiàn)代框架已經(jīng)將 preload、prefetch 添加到打包流程中了，通過靈活的配置，去使用這些預(yù)加載功能，同時我們也可以審時度勢地向 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">
?
<!-- 或使用腳本動態(tài)創(chuàng)建一個 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í)行的時候再執(zhí)行。這在希望加快某個資源的加載速度時很有用。在 preload 下載完資源后，資源只是被緩存起來，瀏覽器不會對其執(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ù)取）是一種瀏覽器機制，其利用瀏覽器空閑時間來下載或預(yù)取用戶在不久的將來可能訪問的文檔。網(wǎng)頁向瀏覽器提供一組預(yù)取提示，并在瀏覽器完成當(dāng)前頁面的加載后開始靜默地拉取指定的文檔并將其存儲在緩存中。當(dāng)用戶訪問其中一個預(yù)取文檔時，便可以快速的從瀏覽器緩存中得到。prefetch 是一個低優(yōu)先級的資源提示，允許瀏覽器在后臺空閑時獲將來可能用得到的資源，并且將他們存儲在瀏覽器的緩存中。一旦一個頁面加載完畢就會開始下載其他的資源，然后當(dāng)用戶點擊了一個帶有 prefetched 的連接，它將可以立刻從緩存中加載內(nèi)容。

Preload & Prefetch 的區(qū)別

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

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

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

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

其中

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

懶加載

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

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

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

圖片懶加載

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

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

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

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

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

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

路由懶加載

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

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

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

組件懶加載

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

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

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

其他時候不建議拆分過細(xì)，因為會造成瀏覽器http請求增多；

最后

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

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

最新評論