為什么要靜態(tài)資源預(yù)加載？

靜態(tài)資源文件主要指的就是圖片，我們在項(xiàng)目中用到最多的靜態(tài)資源文件也是圖片。但是圖片作為一種可替換元素，在使用時(shí)有很多的問題。

在了解圖片問題之前，先看看發(fā)生在我身上的真實(shí)小故事，幫助大家更好的理解。

在一個(gè)陽光明媚的清晨，你因?yàn)楦鞣N原因出門晚了。你一路飛奔找到最近的小藍(lán)車，途中完成wifi切換流量、打開支付寶、點(diǎn)擊哈羅等操作?？粗M(jìn)入小程序的loading，你知道今天又能擠上地鐵，嘴角不禁微微上揚(yáng)。

在loading消失的最后一秒你也剛好氣喘吁吁的跑到了小藍(lán)車面前，迫不及待的點(diǎn)擊"掃一掃"三個(gè)大字...

就在你手指將要觸碰到屏幕的那一瞬間，頁面突然一閃，原來掃一掃的位置變成了去購買。下一秒頁面不出意外的跳轉(zhuǎn)到了優(yōu)惠活動(dòng)頁，重新開始了loading...

待你點(diǎn)擊返回掃開小藍(lán)，紅綠燈已經(jīng)由黃轉(zhuǎn)紅，今天鐵定是遲到了...

相信每天踩著最后一秒打卡的朋友一定很理解我的心路歷程??????。

封面的動(dòng)圖就是那個(gè)頁面的變動(dòng)過程，這個(gè)動(dòng)圖也很好的說明了圖片在前端渲染時(shí)出現(xiàn)的問題。

圖片在使用時(shí)的問題

文件大小要大于文字，在網(wǎng)絡(luò)中傳輸慢。

故事中同一個(gè)接口的去購買文字已經(jīng)展示出來，但是banner圖還沒渲染出來。

影響用戶體驗(yàn)

故事中打開頁面后原本是banner圖的位置有一大塊空白，這對于用戶體驗(yàn)來說不夠好。

試想如果一個(gè)頁面中大大小小的圖片有很多，在加載時(shí)都是這樣的空白會(huì)是什么體驗(yàn)？

或者當(dāng)你點(diǎn)擊了跳轉(zhuǎn)或者打開一個(gè)內(nèi)容時(shí)，內(nèi)容中的圖片位置總是先顯示空白會(huì)是什么體驗(yàn)？

影響Dom結(jié)構(gòu)

故事中頁面之所以會(huì)發(fā)生抖動(dòng)和閃爍，是因?yàn)閐om結(jié)構(gòu)發(fā)生了變化。故事中dom結(jié)構(gòu)變化的原因可能是因?yàn)閮?yōu)惠接口返回慢而導(dǎo)致的，但是圖片的加載和渲染也能出現(xiàn)類似的場景。進(jìn)而導(dǎo)致用戶的行為因?yàn)轫撁鎑om的變動(dòng)而發(fā)生錯(cuò)誤。

圖片會(huì)裂開

將圖片作為背景圖片時(shí)，加載失敗頂多導(dǎo)致背景空白。但是直接使用image標(biāo)簽如果圖片加載失敗就會(huì)有一個(gè)裂開的圖片展示到頁面上，這種場景相信大家都見到過。

解決辦法

• 可以將圖片壓縮到盡可能小，這樣可以大幅提高傳輸和加載的速度；
• 使用背景圖片代替image標(biāo)簽；
• 可以嘗試將小圖標(biāo)整合成精靈圖雪碧圖；
• 針對dom結(jié)構(gòu)變動(dòng)，可以參考哈羅在圖片外層設(shè)置一個(gè)差不多高度的div預(yù)先給圖片留個(gè)位置；

無法解決的場景

以上的解決方法都適用于所用到的圖片比較小，或者比較少的情況下。當(dāng)圖片本身比較大時(shí)即使經(jīng)過壓縮還是很大，也不方便做成精靈圖。當(dāng)一個(gè)項(xiàng)目擁有很多圖片，用戶在不同項(xiàng)目的子路由間跳轉(zhuǎn)或者通過交互觸發(fā)頁面上大量圖片更新時(shí)，上面的方法就不是很適用了。

什么是靜態(tài)資源預(yù)加載？

靜態(tài)資源預(yù)加載的原理是利用瀏覽器的緩存機(jī)制配合img的onload事件，將漫長的圖片的加載過程放在真正進(jìn)入頁面之前，進(jìn)入頁面后所有用到的圖片都會(huì)直接從內(nèi)存讀取。

也就是說要將頁面的初始化接口在進(jìn)入頁面之前調(diào)用，從而獲取要加載的圖片鏈接。

靜態(tài)資源預(yù)加載的優(yōu)點(diǎn)和缺點(diǎn)

優(yōu)點(diǎn)

• 用戶進(jìn)入頁面后一瞬間就可以看到整個(gè)頁面而不會(huì)出現(xiàn)白屏；
• 用戶在切換tab或者是跳轉(zhuǎn)到子路由頁面時(shí)不會(huì)因?yàn)榧虞d圖片而出現(xiàn)頁面的卡頓；
• 不會(huì)出現(xiàn)圖片由空白從上至下一點(diǎn)點(diǎn)的向下渲染的過程；
• 不會(huì)出現(xiàn)因?yàn)閳D片沒及時(shí)加載出來而導(dǎo)致的dom結(jié)構(gòu)崩亂，造成頁面閃爍；

缺點(diǎn)

• 漫長的圖片加載放到進(jìn)入頁面之前會(huì)讓用戶的等待時(shí)間變長；
• 過長的等待時(shí)間可能會(huì)導(dǎo)致轉(zhuǎn)化率的下降；

缺點(diǎn)的處理

為了應(yīng)對這個(gè)缺陷，在做靜態(tài)資源預(yù)加載處理進(jìn)入頁面之前，我們通常都會(huì)搭配一個(gè)可以顯示進(jìn)度的loading。這樣可以讓用戶實(shí)時(shí)獲取到加載進(jìn)度，而不是無謂的等待。這樣一定程度上可以增加用戶停留在當(dāng)前頁面的時(shí)間，從而進(jìn)入到下個(gè)頁面。

靜態(tài)資源預(yù)加載的實(shí)現(xiàn)

通過遞歸的方式在每一張圖片onload成功之后開始加載下一個(gè)圖片，直到圖片全部都加載完成。

import isFunction from 'lodash/isFunction';
    /**
     * 圖片資源預(yù)加載
     * @param {Array} urlArr 圖片鏈接數(shù)組
     * @param {number} index 當(dāng)前加載的是第幾張圖片
     * @param {function} imgLoadFn 單張圖片加載成功的回調(diào)
     * @param {function} successFn 成功失敗回調(diào)函數(shù)
     * @param {function} errorFn 加載失敗回調(diào)函數(shù)
     */
    imgLoader(urlArr, index, imgLoadFn, successFn, errorFn) {
        if (index === urlArr.length && !urlArr[ index ]) return;
        downloadPic(...arguments);
    }
    //  加載單張圖片
    downloadPic(urlArr, index, imgLoadFn, successFn, errorFn) {
        console.log('開始加載第', index, '張圖')
        const img = document.createElement('img');
        img.src = urlArr[ index ];
        img.onload = () => {
            // 這里每一個(gè)圖片加載完成時(shí)傳入的應(yīng)該是index+1，因?yàn)閕ndex是從0開始的，而這里表示的是第幾張圖片完成加載的回調(diào)，傳入數(shù)組長度用于計(jì)算百分比
            isFunction(imgLoadFn) && imgLoadFn(index + 1, urlArr.length);
            if (index === urlArr.length - 1) {
                // 加載完最后一張時(shí)調(diào)用全部完成函數(shù)
                successFn(index);
            } else {
               //  否則開啟下一張圖片的加載
                index += 1;
                downloadPic(urlArr, index, imgLoadFn, successFn, errorFn);
            }
        };
        img.onError = errorFn ? () => {
            isFunction(errorFn) && errorFn({
                index,
                url: urlArr[ index ]
            })
        } : () => imgLoaderError(index);
    }
    /**
     * 圖片加載失敗
     * @param {number} index 數(shù)組下標(biāo)
     */
    imgLoaderError(index) {
        console.error(`第${ index }張圖片加載失敗`);
    }

靜態(tài)資源預(yù)加載的調(diào)用

// 定義好對應(yīng)的處理函數(shù)
const imgLoadFn = (current, total) => {
    // 用百分比來顯示當(dāng)前的加載進(jìn)度顯示在頁面loading中
    this.percent = parseInt(current / total * 100) + '%';
}
const successFn = () => {
    this.percent = '100%';
    this.showLoading = false;  // 關(guān)閉loading
    console.log('圖片已全部預(yù)加載完成，可以跳轉(zhuǎn)到對應(yīng)頁面')
}
const errorFn = () => {
    console.log('加載資源錯(cuò)誤');
}
//  調(diào)用
imgLoader(urlArr, 0, imgLoadFn, successFn, errorFn);

靜態(tài)資源預(yù)加載的應(yīng)用場景

靜態(tài)資源預(yù)加載常用于各種活動(dòng)頁面，例如雙11、618、818、年度賬單、周年活動(dòng)等。

為了讓用戶在進(jìn)入活動(dòng)頁之后的交互更流暢，通常會(huì)在進(jìn)入頁面前使用靜態(tài)資源加載將所需的資源文件都加載到緩存中。

所以，這也是我們在進(jìn)入這些頁面之前經(jīng)?？梢钥吹揭粋€(gè)加載進(jìn)度loading的原因。關(guān)于如何實(shí)現(xiàn)一個(gè)帶進(jìn)度的loading，可以看我的這篇文章。

使用svg實(shí)現(xiàn)簡單帶進(jìn)度的loading

以上就是JavaScript前端靜態(tài)資源預(yù)加載實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于JavaScript前端靜態(tài)資源預(yù)加載的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論