小程序性能優化總結

歷史總結：

• 小程序倒計時深究
• 小程序實戰踩坑之B2B商城項目總結
• 初試小刀自我簡歷小程序

啓動加載優化

在小程序啓動時，微信會在背後完成幾項工做：下載小程序代碼包、加載小程序代碼包、初始化小程序首頁。
初始化小程序環境是微信環境作的工做,咱們只須要控制代碼包大小，和經過一些相關的緩存策略控制，和資源控制，邏輯控制，分包加載控制來進行啓動加載優化。

• 勾選開發者工具中， 上傳時壓縮代碼（若採用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的數據量也有助於提高這一個步驟的性能。