小程序性能優化的幾點實踐技巧

時間 2019-11-17

原文原文鏈接

你們好，我叫張文軒，這是個人第6篇分享html

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

評判小程序頁面性能

因爲小程序開發環境的特殊性，咱們不能像普通網頁那樣經過chrome開發工具或者一些成熟的性能測試工具（例如Lighthouse）來了解一個頁面的性能，但微信官方提供了一個性能評分的工具，點擊這裏能夠查看工具詳情。小程序

體驗評分是一項給小程序的體驗好壞打分的功能，它會在小程序運行過程當中實時檢查，分析出一些可能致使體驗很差的地方，而且定位出哪裏有問題，以及給出一些優化建議。api

後面我會以一個實際的例子來展現如何經過該工具來優化頁面性能，咱們先看下咱們頁面優化前的一個評分狀況。數組

存在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支持數據路徑的寫法，好比bash

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數據，顯示圖片組件。