小程式效能優化的幾點實作技巧-小程式開發-PHP中文網

大家好，我叫張文軒，這是我的第6篇分享

我們都知道，效能的好壞直接影響用戶的體驗。本文首先論述下如何評判一個小程式頁面的效能情況，之後透過具體的案例重點講解下幾點實踐技巧，最後再講講key值在渲染一個列表時發揮了一個怎麼樣的作用，以此來論述為啥key值對效能提升有幫助。

評判小程式頁面效能

由於小程式開發環境的特殊性，我們不能像普通網頁那樣透過chrome開發工具或一些成熟的效能測試工具（例如Lighthouse）來了解一個頁面的效能，但微信官方提供了一個效能評分的工具，點擊這裡可以查看工具詳情。

體驗評分是一項給小程式的體驗好壞打分的功能，它會在小程式運行過程中即時檢查，分析出一些可能導致體驗不好的地方，並且定位出哪裡有問題，並給予一些優化建議。

後面我會以一個實際的例子來展示如何透過該工具來優化頁面效能，我們先看下我們頁面優化前的一個評分情況。

存在setData的資料過大

##我們的功能裡面有個滾動到底部載入的功能，優化前我們的做法是這樣的

<!--只阐述逻辑，非真实代码-->

// 1: 初始一个list，存储列表数据
data = startList
// 2: 监听滚动事件，滚动到底部获取新数据，并追加到list尾部,最后重新setData
onReachBottom:()=>{
    const {list} = this.data
    fetchNewData().then((res)=>{
        list.push(res.list);
        this.setData({list})
    }
}

登入後複製

我估計大部分人面對長列表滾動的時候，一開始的處理方式都是這樣的，如果資料不多，只有幾頁可能不會太暴露問題，如果頁數過多，幾十頁甚至上百頁的情況，list的資料會越來越大，每次setData的資料就會越來越多，因而每次頁面重新渲染的節點就會越來越多，從而導致滾動到後面，載入越來越慢。另外，由於小程式的視圖渲染層和資料邏輯處理層是分開的，不是在同一個執行緒上面的，從使用者觸發頁面交互，到處理資料邏輯，最後層現頁面，資料到視圖是需要傳輸的，因而小程式本身對資料大小也有限制，不能超過1M。

setData資料路徑

要怎麼解決呢？小程式setData裡面的key支援資料路徑的寫法，例如

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

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

登入後複製

所以我們可以透過資料路徑的寫法，來將資料分批的傳輸到檢視層中，減少一次setData的數據大小。具體寫法如下

// 1.通过一个二维数组来存储数据let feedList = [[array]];

// 2.维护一个页面变量值，加载完一次数据page++let page = 1

// 3.页面每次滚动到底部，通过数据路径更新数据
onReachBottom:()=>{
    fetchNewData().then((newVal)=>{
        this.setData({
            ['feedList[' + (page - 1) + ']']: newVal,
        })
    }
}
// 4.最终我们的数据是[[array1],[array2]]这样的格式，然后通过wx:for遍历渲染数据

登入後複製

存在短時間內發起太多圖片請求（圖片懶加載）

這個應該好理解，就是渲染頁面時，一次性發送了過多的圖片請求，導致了同一時間發起了過多的http請求，http連接是非常耗時的，尤其是一次性發起這麼多，並且一次性發起的http鏈接也是有限制的，比如chrome瀏覽器就限制一次性最多6個。

所以在渲染頁面時，不在視圖範圍內的圖片我們不加載，只有元素出現在視圖範圍內了，再渲染。

常規的做法是，透過

getBoundingClientRect()取得元素的位置，然後與頁面捲動位置比較，如果出現在視圖內，就會顯示img。這種方式有2個問題

getBoundingClientRect()方法呼叫本身容易造成頁面重排
監聽捲動事件本身就頻繁觸發，雖然可以透過節流的方式來減少，但還是容易增加無謂程式碼處理

IntersectionObserver

其實，微信提供了

IntersectionObserver物件。

IntersectionObserver 對象，用來推斷某些節點是否可以被使用者看見、有多大比例可以被使用者看見
##透過這個api我們不用再主動去監聽元素位置了，在頁面渲染一開始，透過這個api指明需要監聽的元素，系統會自動去監聽了元素位置。

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，表示元素出現在檢視中了，重新setData數據，顯示圖片元件。