小程式效能優化總結

張炳發表於2019-01-09
優化

歷史總結：

啟動載入優化

在小程式啟動時，微信會在背後完成幾項工作：下載小程式程式碼包、載入小程式程式碼包、初始化小程式首頁。
初始化小程式環境是微信環境做的工作,我們只需要控制程式碼包大小，和通過一些相關的快取策略控制，和資源控制，邏輯控制，分包載入控制來進行啟動載入優化。

  • 勾選開發者工具中， 上傳時壓縮程式碼（若採用wepy高階版本，自帶壓縮，請按官網文件採取點選）
  • 精簡程式碼，去掉不必要的WXML結構和未使用的WXSS定義。
  • 減少在程式碼包中直接嵌入的資原始檔。（比如全國地區庫，微信有自帶的，在沒必要的時候，勿自用自己的庫）
  • 及時清理無用的資源（js檔案、圖片、demo頁面等）
  • 壓縮圖片，使用適當的圖片格式，減少本地圖片數量等
  • 如果小程式比較複雜，優化後的程式碼總量可能仍然比較大，此時可以採用分包載入的方式進行優化，分包載入初始化時只載入首評相關、高頻訪問的資源，其他的按需載入。
  • 提前做非同步請求，頁面最好在onLoad時非同步請求資料，不要在onReady時請求
  • 啟用快取資料策略，請求時先展示快取內容，讓頁面儘快展示，請求到最新資料之後再重新整理
  • 避免白屏，使用骨架屏等

資料通訊優化

為了提升資料更新的效能，開發者在執行setData呼叫時，最好遵循以下原則：

  • 不要過於頻繁呼叫setData，應考慮將多次setData合併成一次setData呼叫；
  • 資料通訊的效能與資料量正相關，因而如果有一些資料欄位不在介面中展示且資料結構比較複雜或包含長字串，則不應使用setData來設定這些資料；
  • 與介面渲染無關的資料最好不要設定在data中，可以考慮設定在page物件的其他欄位下。

提升資料更新效能方式的程式碼示例：

Page({
  onShow: function() {

    // 不要頻繁呼叫setData
    this.setData({ a: 1 })
    this.setData({ b: 2 })
    // 絕大多數時候可優化為
    this.setData({ a: 1, b: 2 })

    // 不要設定不在介面渲染時使用的資料，並將介面無關的資料放在data外
    this.setData({
      myData: {
        a: `這個字串在WXML中用到了`,
        b: `這個字串未在WXML中用到，而且它很長…………………………`
      }
    })
    // 可以優化為
    this.setData({
      `myData.a`: `這個字串在WXML中用到了`
    })
    this._myData = {
      b: `這個字串未在WXML中用到，而且它很長…………………………`
    }

  }
})

事件通訊優化

檢視層會接受使用者事件，如點選事件、觸控事件等。當一個使用者事件被觸發且有相關的事件監聽器需要被觸發時，檢視層會將資訊反饋給邏輯層。這個反饋是非同步的，會產生延遲，降低延遲的方法有兩個：

  • 去掉不必要的事件繫結（WXML中的bind和catch），從而減少通訊的資料量和次數；
  • 事件繫結時需要傳輸target和currentTarget的dataset，因而不要在節點的data字首屬性中放置過大的資料。

渲染優化

  • 頁面方法onPageScroll使用， 每次頁面滾動都會觸發，避免在裡面寫過於複雜的邏輯 ，特別是一些執行重渲染頁面的邏輯（另外，可以看我的文章——移動端滾動研究，說明了在滾動的情況下導致的渲染效能低下的各種分析和應付方法總結）
  • 在進行檢視重渲染的時候，會進行當前節點樹與新節點樹的比較，去掉不必要設定的資料、減少setData的資料量也有助於提升這一個步驟的效能。

相關文章