您好,登錄后才能下訂單哦!
這篇文章主要介紹了小程序頁(yè)面性能如何,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
由于小程序開發(fā)環(huán)境的特殊性,我們不能像普通網(wǎng)頁(yè)那樣通過chrome開發(fā)工具或者一些成熟的性能測(cè)試工具(例如Lighthouse)來了解一個(gè)頁(yè)面的性能,但微信官方提供了一個(gè)性能評(píng)分的工具,點(diǎn)擊這里可以查看工具詳情。
體驗(yàn)評(píng)分是一項(xiàng)給小程序的體驗(yàn)好壞打分的功能,它會(huì)在小程序運(yùn)行過程中實(shí)時(shí)檢查,分析出一些可能導(dǎo)致體驗(yàn)不好的地方,并且定位出哪里有問題,以及給出一些優(yōu)化建議。
后面我會(huì)以一個(gè)實(shí)際的例子來展示如何通過該工具來優(yōu)化頁(yè)面性能,我們先看下我們頁(yè)面優(yōu)化前的一個(gè)評(píng)分情況。
存在setData的數(shù)據(jù)過大
我們的功能里面有個(gè)滾動(dòng)到底部加載的功能,優(yōu)化前我們的做法是這樣的
<!--只闡述邏輯,非真實(shí)代碼--> // 1: 初始一個(gè)list,存儲(chǔ)列表數(shù)據(jù) data = startList // 2: 監(jiān)聽滾動(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í)候,一開始的處理方式都是這樣的,如果數(shù)據(jù)不多,只有幾頁(yè)可能不會(huì)太暴露問題,如果頁(yè)數(shù)過多,幾十頁(yè)甚至上百頁(yè)的情況,list的數(shù)據(jù)會(huì)越來越大,每次setData的數(shù)據(jù)就會(huì)越來越多,因而每次頁(yè)面重新渲染的節(jié)點(diǎn)就會(huì)越來越多,從而導(dǎo)致滾動(dòng)到后面,加載越來越慢。另外,由于小程序的視圖渲染層和數(shù)據(jù)邏輯處理層是分開的,不是在同一個(gè)線程上面的,從用戶觸發(fā)頁(yè)面交互,到處理數(shù)據(jù)邏輯,最后層現(xiàn)頁(yè)面,數(shù)據(jù)到視圖是需要傳輸?shù)?,因而小程序本身?duì)數(shù)據(jù)大小也有限制,不能超過1M。
怎么解決呢?小程序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.通過一個(gè)二維數(shù)組來存儲(chǔ)數(shù)據(jù)let feedList = [[array]]; // 2.維護(hù)一個(gè)頁(yè)面變量值,加載完一次數(shù)據(jù)page++let page = 1 // 3.頁(yè)面每次滾動(dòng)到底部,通過數(shù)據(jù)路徑更新數(shù)據(jù) onReachBottom:()=>{ fetchNewData().then((newVal)=>{ this.setData({ ['feedList[' + (page - 1) + ']']: newVal, }) } } // 4.最終我們的數(shù)據(jù)是[[array1],[array2]]這樣的格式,然后通過wx:for遍歷渲染數(shù)據(jù)
這個(gè)應(yīng)該好理解,就是渲染頁(yè)面時(shí),一次性發(fā)送了過多的圖片請(qǐng)求,導(dǎo)致了同一時(shí)間發(fā)起了過多的http請(qǐng)求,http連接是非常耗時(shí)的,尤其是一次性發(fā)起這么多,并且一次性發(fā)起的http鏈接也是有限制的,比如chrome瀏覽器就限制一次性最多6個(gè)。
所以在渲染頁(yè)面時(shí),不在視圖范圍內(nèi)的圖片我們不加載,只有元素出現(xiàn)在視圖范圍內(nèi)了,再渲染。
常規(guī)的做法是,通過getBoundingClientRect()
獲取元素的位置,然后與頁(yè)面滾動(dòng)位置比較,如果出現(xiàn)在視圖內(nèi),就將img
顯示。這種方式有2個(gè)問題
getBoundingClientRect()方法調(diào)用本身容易引起頁(yè)面重排
監(jiān)聽滾動(dòng)事件本身就頻繁觸發(fā),雖然可以通過節(jié)流的方式來減少,但還是容易增加無謂代碼處理
其實(shí),微信提供了IntersectionObserver
對(duì)象。
IntersectionObserver 對(duì)象,用于推斷某些節(jié)點(diǎn)是否可以被用戶看見、有多大比例可以被用戶看見
通過這個(gè)api我們不用再主動(dòng)去監(jiān)聽元素位置了,在頁(yè)面渲染一開始,通過這個(gè)api指明需要監(jiān)聽的元素,系統(tǒng)會(huì)自動(dòng)去監(jiān)聽了元素位置。
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,說明元素出現(xiàn)在視圖中了,重新setData數(shù)據(jù),顯示圖片組件。
這個(gè)問題就是指圖片尺寸太大了,而頁(yè)面上我們顯示的尺寸又太小了,圖片尺寸大,請(qǐng)求圖片就越慢,導(dǎo)致頁(yè)面渲染速度下降。
對(duì)于頁(yè)面里面的圖片,最好都把圖片存儲(chǔ)在cdn服務(wù)器上,一個(gè)是能充分利用cdn緩存來加快請(qǐng)求速度,另外一個(gè)就是cdn上能夠?qū)D片進(jìn)行一定的處理,比如裁剪。我司就是通過cdn來響應(yīng)圖片處理,然后請(qǐng)求圖片時(shí)告訴cdn服務(wù)器需要什么要的尺寸圖片,由cdn服務(wù)器響應(yīng)對(duì)應(yīng)尺寸圖片。
key值在列表渲染的時(shí)候,能夠提升列表渲染性能,為什么呢?首先得想想小程序的頁(yè)面是如何渲染的,主要分為以下幾步:
將wxml結(jié)構(gòu)的文檔構(gòu)建成一個(gè)vdom虛擬數(shù)
頁(yè)面有新的交互,產(chǎn)生新的vdom數(shù),然后與舊數(shù)進(jìn)行比較,看哪里有變化了,做對(duì)應(yīng)的修改(刪除、移動(dòng)、更新值)等操作
最后再將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ù)組的索引來處理,因而會(huì)導(dǎo)致一些類似input等輸入框組件的值出現(xiàn)混亂的問題。
相關(guān)測(cè)試代碼可以查看:wxkey
可以看到
不加key,在數(shù)組末尾追加元素,之前已渲染的元素不會(huì)重新渲染。但如果是在頭部或者中間插入元素,整個(gè)list被刪除重新渲染,且input組件的值還出現(xiàn)了混亂,值沒有正常被更新
添加key,在數(shù)組末尾、中間、或者頭部插入元素,其它已存在的元素都不會(huì)被重新渲染,值也能正常被更新
因而,在做list渲染時(shí),如果list的順序發(fā)生變化時(shí),最好增加key,且不要簡(jiǎn)單的使用數(shù)組索引當(dāng)做key。
最后看看我們的成果:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“小程序頁(yè)面性能如何”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。