小程序优化一般方法

数据通信层 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分），最后根据各规则权重和公式计算出总得分。

分析工具 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 文件即可；