大家好，我叫張文軒，這是我的第6篇分享我們都知道，性能的好壞直接影響用戶的體驗。
本文首先論述下如何評判一個小程序頁面的性能情況，之后通過具體的案例重點講解下幾點實踐技巧，最后再講講key值在渲染一個列表時發(fā)揮了一個怎么樣的作用，以此來論述為啥key值對性能提升有幫助。
評判小程序頁面性能由于小程序開發(fā)環(huán)境的特殊性，我們不能像普通網(wǎng)頁那樣通過chrome開發(fā)工具或者一些成熟的性能測試工具（例如Lighthouse）來了解一個頁面的性能，但微信官方提供了一個性能評分的工具，點擊這里可以查看工具詳情。
體驗評分是一項給小程序的體驗好壞打分的功能，它會在小程序運行過程中實時檢查，分析出一些可能導致體驗不好的地方，并且定位出哪里有問題，以及給出一些優(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é)點就會越來越多，從而導致滾動到后面，加載越來越慢。
另外，由于小程序的視圖渲染層和數(shù)據(jù)邏輯處理層是分開的，不是在同一個線程上面的，從用戶觸發(fā)頁面交互，到處理數(shù)據(jù)邏輯，最后層現(xiàn)頁面，數(shù)據(jù)到視圖是需要傳輸?shù)模蚨〕绦虮旧韺?shù)據(jù)大小也有限制，不能超過1M。
setData數(shù)據(jù)路徑怎么解決呢？小程序setData里面的key支持數(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.維護一個頁面變量值，加載完一次數(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ù)存在短時間內發(fā)起太多圖片請求（圖片懶加載）這個應該好理解，就是渲染頁面時，一次性發(fā)送了過多的圖片請求，導致了同一時間發(fā)起了過多的http請求，http連接是非常耗時的，尤其是一次性發(fā)起這么多，并且一次性發(fā)起的http鏈接也是有限制的，比如chrome瀏覽器就限制一次性最多6個。
所以在渲染頁面時，不在視圖范圍內的圖片我們不加載，只有元素出現(xiàn)在視圖范圍內了，再渲染。
常規(guī)的做法是，通過getBoundingClientRect()獲取元素的位置，然后與頁面滾動位置比較，如果出現(xiàn)在視圖內，就將img顯示。
這種方式有2個問題getBoundingClientRect()方法調用本身容易引起頁面重排監(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ū)域過小這個問題就是指圖片尺寸太大了，而頁面上我們顯示的尺寸又太小了，圖片尺寸大，請求圖片就越慢，導致頁面渲染速度下降。
CDN圖片處理對于頁面里面的圖片，最好都把圖片存儲在cdn服務器上，一個是能充分利用cdn緩存來加快請求速度，另外一個就是cdn上能夠將圖片進行一定的處理，比如裁剪。
我司就是通過cdn來響應圖片處理，然后請求圖片時告訴cdn服務器需要什么要的尺寸圖片，由cdn服務器響應對應尺寸圖片。
key值在列表渲染中的作用key值在列表渲染的時候，能夠提升列表渲染性能，為什么呢？首先得想想小程序的頁面是如何渲染的，主要分為以下幾步：
將wxml結構的文檔構建成一個vdom虛擬數(shù)頁面有新的交互，產(chǎn)生新的vdom數(shù)，然后與舊數(shù)進行比較，看哪里有變化了，做對應的修改（刪除、移動、更新值）等操作最后再將vdom渲染成真實的頁面結構key值的作用就在第二步，當數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時的效率。
key值如果不指明，默認會按數(shù)組的索引來處理，因而會導致一些類似input等輸入框組件的值出現(xiàn)混亂的問題。
相關測試代碼可以查看：
wxkey可以看到不加key,在數(shù)組末尾追加元素，之前已渲染的元素不會重新渲染。
但如果是在頭部或者中間插入元素，整個list被刪除重新渲染，且input組件的值還出現(xiàn)了混亂，值沒有正常被更新添加key，在數(shù)組末尾、中間、或者頭部插入元素，其它已存在的元素都不會被重新渲染，值也能正常被更新因而，在做list渲染時，如果list的順序發(fā)生變化時，最好增加key，且不要簡單的使用數(shù)組索引當做key。
最后看看我們的成果：
體驗碼：
希望今天我的分享能對您優(yōu)化小程序頁面有一定的啟示，創(chuàng)造出性能更好更流暢的頁面。
最后如果喜歡我的文章，歡迎點擊關注，我會不定期的分享自己的一些所看所想，和大家一起成長，持續(xù)學習。
推薦教程：
《微信小程序》以上就是小程序性能優(yōu)化的幾點實踐技巧的詳細內容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
微信小程序本文轉載于：
掘金社區(qū)，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序用canvas繪制海報的做法
下一篇：
小程序每篇中怎么樣插入鏈接？相關文章相關視頻如何使用拍照轉文字的微信小程序？微信小程序開發(fā)BUG經(jīng)驗的一些總結怎樣將微信小程序發(fā)送到桌面？用微信小程序實現(xiàn)WebSocket心跳重連小程序性能優(yōu)化的幾點實踐技巧初識微信小程序(1)初識微信小程序(4)深入了解微信小程序(二) [溫州做小程序]