小程序優化一般方法

數據通信層 js

1.不要過於頻繁調用setData,應考慮將多次setData合併成一次setData調用;

2.數據通信的性能與數據量正相關,因而如果有一些數據字段不在界面中展示且數據結構比較複雜或包含長字符串,則不應使用setData來設置這些數據;

3.與界面渲染無關的數據最好不要設置在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

渲染時間開銷大體上與節點樹中節點的總量成正比例關係。因而減少WXML中節點的數量可以有效降低初始渲染和重渲染的時間開銷,提升渲染性能。

<view data-my-data="{{myData}}"> <!-- 這個 view 和下一行的 view 可以合併 -->
  <view class="my-class" data-my-data="{{myData}}" bindtap="onTap">
    <text> <!-- 這個 text 通常是沒必要的 -->
      {{myText}}
    </text>
  </view>
</view>

<!-- 可以簡化爲 -->
<view class="my-class" data-my-data="{{myData}}" bindtap="onTap">
  {{myText}}
</view>

體驗評分 tool

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

運行環境要求

  • 下載並安裝 1.02.1808300 或以上版本的開發者工具,下載地址
  • 基礎庫需要切到 2.2.0 或以上版本。

使用流程

  1. 打開開發者工具,在詳情裏切換基礎庫到 2.2.0 或以上版本。
  2. 在調試器區域切換到 Audits 面板。
  3. 點擊”開始“按鈕,然後自行操作小程序界面,運行過的頁面就會被“體驗評分”檢測到。
  4. 點擊 “停止" 則結束檢測,在當前面板顯示相應的檢測報告,開發者可根據報告中的建議對相應功能進行優化。
  5. 如需再次運行體驗評分,可點擊報告上方的“清空體驗評分”恢復初始狀態。請注意,目前系統不提供報告存儲服務,一旦清空體驗評分,將無法再查看本次評分結果。

目前體驗評分共有27條規則,共分爲三類:性能、體驗、最佳實踐,滿足規則要求得分(100分),否則不得分(0分),最後根據各規則權重和公式計算出總得分。

img

分析工具 adb

  1. PC 上需要先安裝 adb 工具,可以參考一些主流教程進行安裝,Mac 上可使用 brew 直接安裝。
  2. 確定 adb 工具已成功安裝後,在開發者工具上打開 Trace Panel,將 Android 手機通過 USB 連接上 PC,點擊「Choose Devices」,此時手機上可能彈出連接授權框,請點擊「允許」。
  3. 選擇設備後,在手機上打開你需要調試的開發版小程序,通過右上角菜單,打開性能監控面板,重啓小程序;
  4. 重啓後,在小程序上進行操作,完成操作後,通過右上角菜單,導出 Trace 數據;
    需要調試的開發版小程序,通過右上角菜單,打開性能監控面板,重啓小程序;
  5. 重啓後,在小程序上進行操作,完成操作後,通過右上角菜單,導出 Trace 數據;
  6. 此時開發者工具 Trace Panel 上會自動拉取 Trace 文件,選擇你要分析的 Trace 文件即可;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章