這篇文章主要介紹了小程序頁(yè)面性能如何，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),楚雄州企業(yè)網(wǎng)站建設(shè),楚雄州品牌網(wǎng)站建設(shè),網(wǎng)站定制,楚雄州網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,楚雄州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

評(píng)判小程序頁(yè)面性能

由于小程序開(kāi)發(fā)環(huán)境的特殊性，我們不能像普通網(wǎng)頁(yè)那樣通過(guò)chrome開(kāi)發(fā)工具或者一些成熟的性能測(cè)試工具（例如Lighthouse）來(lái)了解一個(gè)頁(yè)面的性能，但微信官方提供了一個(gè)性能評(píng)分的工具，點(diǎn)擊這里可以查看工具詳情。

體驗(yàn)評(píng)分是一項(xiàng)給小程序的體驗(yàn)好壞打分的功能，它會(huì)在小程序運(yùn)行過(guò)程中實(shí)時(shí)檢查，分析出一些可能導(dǎo)致體驗(yàn)不好的地方，并且定位出哪里有問(wèn)題，以及給出一些優(yōu)化建議。

后面我會(huì)以一個(gè)實(shí)際的例子來(lái)展示如何通過(guò)該工具來(lái)優(yōu)化頁(yè)面性能，我們先看下我們頁(yè)面優(yōu)化前的一個(gè)評(píng)分情況。

存在setData的數(shù)據(jù)過(guò)大

我們的功能里面有個(gè)滾動(dòng)到底部加載的功能，優(yōu)化前我們的做法是這樣的

<!--只闡述邏輯，非真實(shí)代碼-->

// 1: 初始一個(gè)list，存儲(chǔ)列表數(shù)據(jù)
data = startList
// 2: 監(jiān)聽(tīng)滾動(dòng)事件，滾動(dòng)到底部獲取新數(shù)據(jù)，并追加到list尾部,最后重新setData
onReachBottom:()=>{
    const {list} = this.data
    fetchNewData().then((res)=>{
        list.push(res.list);
        this.setData({list})
    }
}

我估計(jì)大部分人面對(duì)長(zhǎng)列表滾動(dòng)的時(shí)候，一開(kāi)始的處理方式都是這樣的，如果數(shù)據(jù)不多，只有幾頁(yè)可能不會(huì)太暴露問(wèn)題，如果頁(yè)數(shù)過(guò)多，幾十頁(yè)甚至上百頁(yè)的情況，list的數(shù)據(jù)會(huì)越來(lái)越大，每次setData的數(shù)據(jù)就會(huì)越來(lái)越多，因而每次頁(yè)面重新渲染的節(jié)點(diǎn)就會(huì)越來(lái)越多，從而導(dǎo)致滾動(dòng)到后面，加載越來(lái)越慢。另外，由于小程序的視圖渲染層和數(shù)據(jù)邏輯處理層是分開(kāi)的，不是在同一個(gè)線程上面的，從用戶觸發(fā)頁(yè)面交互，到處理數(shù)據(jù)邏輯，最后層現(xiàn)頁(yè)面，數(shù)據(jù)到視圖是需要傳輸?shù)模蚨〕绦虮旧韺?duì)數(shù)據(jù)大小也有限制，不能超過(guò)1M。

setData數(shù)據(jù)路徑

怎么解決呢？小程序setData里面的key支持?jǐn)?shù)據(jù)路徑的寫(xiě)法，比如

let o = obj;
this.setData({ 
  'o.屬性'：value
})

或者let a = array;
this.setData({ 
  'array[0].text':value
})

所以我們可以通過(guò)數(shù)據(jù)路徑的寫(xiě)法，來(lái)將數(shù)據(jù)分批的傳輸?shù)揭晥D層中，減少一次性setData的數(shù)據(jù)大小。具體寫(xiě)法如下

// 1.通過(guò)一個(gè)二維數(shù)組來(lái)存儲(chǔ)數(shù)據(jù)let feedList = [[array]];

// 2.維護(hù)一個(gè)頁(yè)面變量值，加載完一次數(shù)據(jù)page++let page = 1

// 3.頁(yè)面每次滾動(dòng)到底部，通過(guò)數(shù)據(jù)路徑更新數(shù)據(jù)
onReachBottom:()=>{
    fetchNewData().then((newVal)=>{
        this.setData({
            ['feedList[' + (page - 1) + ']']: newVal,
        })
    }
}
// 4.最終我們的數(shù)據(jù)是[[array1],[array2]]這樣的格式，然后通過(guò)wx:for遍歷渲染數(shù)據(jù)

存在短時(shí)間內(nèi)發(fā)起太多圖片請(qǐng)求（圖片懶加載）

這個(gè)應(yīng)該好理解，就是渲染頁(yè)面時(shí)，一次性發(fā)送了過(guò)多的圖片請(qǐng)求，導(dǎo)致了同一時(shí)間發(fā)起了過(guò)多的http請(qǐng)求，http連接是非常耗時(shí)的，尤其是一次性發(fā)起這么多，并且一次性發(fā)起的http鏈接也是有限制的，比如chrome瀏覽器就限制一次性最多6個(gè)。

所以在渲染頁(yè)面時(shí)，不在視圖范圍內(nèi)的圖片我們不加載，只有元素出現(xiàn)在視圖范圍內(nèi)了，再渲染。

常規(guī)的做法是，通過(guò)getBoundingClientRect()獲取元素的位置，然后與頁(yè)面滾動(dòng)位置比較，如果出現(xiàn)在視圖內(nèi)，就將img顯示。這種方式有2個(gè)問(wèn)題

• getBoundingClientRect()方法調(diào)用本身容易引起頁(yè)面重排

• 監(jiān)聽(tīng)滾動(dòng)事件本身就頻繁觸發(fā)，雖然可以通過(guò)節(jié)流的方式來(lái)減少，但還是容易增加無(wú)謂代碼處理

IntersectionObserver

其實(shí)，微信提供了IntersectionObserver對(duì)象。

IntersectionObserver 對(duì)象，用于推斷某些節(jié)點(diǎn)是否可以被用戶看見(jiàn)、有多大比例可以被用戶看見(jiàn)

通過(guò)這個(gè)api我們不用再主動(dòng)去監(jiān)聽(tīng)元素位置了，在頁(yè)面渲染一開(kāi)始，通過(guò)這個(gè)api指明需要監(jiān)聽(tīng)的元素，系統(tǒng)會(huì)自動(dòng)去監(jiān)聽(tīng)了元素位置。

let data = list;

<img class="img-{{index}}" wx:for="{{data}}"></img>

data.forEach((item,index)=>{
    this.createIntersectionObserver().relativeToViewport.observe(`.img-${index}`,res=>{
            if (res.intersectionRatio > 0){
            this.setData({
                item.imgShow:true
            })
        }
    })
}

intersectionRatio值大于0，說(shuō)明元素出現(xiàn)在視圖中了，重新setData數(shù)據(jù)，顯示圖片組件。

存在圖片太大而顯示區(qū)域過(guò)小

這個(gè)問(wèn)題就是指圖片尺寸太大了，而頁(yè)面上我們顯示的尺寸又太小了，圖片尺寸大，請(qǐng)求圖片就越慢，導(dǎo)致頁(yè)面渲染速度下降。

cdn圖片處理

對(duì)于頁(yè)面里面的圖片，最好都把圖片存儲(chǔ)在cdn服務(wù)器上，一個(gè)是能充分利用cdn緩存來(lái)加快請(qǐng)求速度，另外一個(gè)就是cdn上能夠?qū)D片進(jìn)行一定的處理，比如裁剪。我司就是通過(guò)cdn來(lái)響應(yīng)圖片處理，然后請(qǐng)求圖片時(shí)告訴cdn服務(wù)器需要什么要的尺寸圖片，由cdn服務(wù)器響應(yīng)對(duì)應(yīng)尺寸圖片。

key值在列表渲染中的作用

key值在列表渲染的時(shí)候，能夠提升列表渲染性能，為什么呢？首先得想想小程序的頁(yè)面是如何渲染的，主要分為以下幾步：

1. 將wxml結(jié)構(gòu)的文檔構(gòu)建成一個(gè)vdom虛擬數(shù)

2. 頁(yè)面有新的交互，產(chǎn)生新的vdom數(shù)，然后與舊數(shù)進(jìn)行比較，看哪里有變化了，做對(duì)應(yīng)的修改（刪除、移動(dòng)、更新值）等操作

3. 最后再將vdom渲染成真實(shí)的頁(yè)面結(jié)構(gòu)

key值的作用就在第二步，當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

key值如果不指明，默認(rèn)會(huì)按數(shù)組的索引來(lái)處理，因而會(huì)導(dǎo)致一些類(lèi)似input等輸入框組件的值出現(xiàn)混亂的問(wèn)題。

相關(guān)測(cè)試代碼可以查看：wxkey

可以看到

• 不加key,在數(shù)組末尾追加元素，之前已渲染的元素不會(huì)重新渲染。但如果是在頭部或者中間插入元素，整個(gè)list被刪除重新渲染，且input組件的值還出現(xiàn)了混亂，值沒(méi)有正常被更新

• 添加key，在數(shù)組末尾、中間、或者頭部插入元素，其它已存在的元素都不會(huì)被重新渲染，值也能正常被更新

因而，在做list渲染時(shí)，如果list的順序發(fā)生變化時(shí)，最好增加key，且不要簡(jiǎn)單的使用數(shù)組索引當(dāng)做key。

最后看看我們的成果：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“小程序頁(yè)面性能如何”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章名稱(chēng)：小程序頁(yè)面性能如何
當(dāng)前URL：http://jinyejixie.com/article32/pppjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、搜索引擎優(yōu)化、電子商務(wù)、外貿(mào)網(wǎng)站建設(shè)、Google、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)