真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

小程序頁面性能如何

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

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

評判小程序頁面性能

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

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

后面我會以一個實際的例子來展示如何通過該工具來優(yōu)化頁面性能,我們先看下我們頁面優(yōu)化前的一個評分情況。

小程序頁面性能如何

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

小程序頁面性能如何

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



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

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

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

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

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

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

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

// 1.通過一個二維數(shù)組來存儲數(shù)據(jù)let feedList = [[array]];

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

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

存在短時間內(nèi)發(fā)起太多圖片請求(圖片懶加載)

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

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

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

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

  • 監(jiān)聽滾動事件本身就頻繁觸發(fā),雖然可以通過節(jié)流的方式來減少,但還是容易增加無謂代碼處理

IntersectionObserver

其實,微信提供了IntersectionObserver對象。

IntersectionObserver 對象,用于推斷某些節(jié)點是否可以被用戶看見、有多大比例可以被用戶看見

通過這個api我們不用再主動去監(jiān)聽元素位置了,在頁面渲染一開始,通過這個api指明需要監(jiān)聽的元素,系統(tǒng)會自動去監(jiān)聽了元素位置。

let data = list;



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

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

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

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

cdn圖片處理

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

key值在列表渲染中的作用

key值在列表渲染的時候,能夠提升列表渲染性能,為什么呢?首先得想想小程序的頁面是如何渲染的,主要分為以下幾步:

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

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

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

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

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

小程序頁面性能如何

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

可以看到

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

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

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

最后看看我們的成果:

小程序頁面性能如何

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


當(dāng)前文章:小程序頁面性能如何
文章源于:http://weahome.cn/article/pppjsc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部