⑦ 性能优化

1 启动

1.1 代码包下载

下载到的小程序代码包是编译、压缩、打包之后的代码包

1.2 分包加载流程

• 主包：小程序启动时会马上打开的页面代码和相关资源

• 分包：其余的代码和资源

在小程序启动时，只有主包的内容才会被下载

2 页面层级准备

• 小程序启动时仅有一个页面层级

• 在视图层内，小程序的每一个页面都独立运行在一个页面层级上。

  • 每次调用 wx.navigateTo，都会创建一个新的页面层级

  • 相对地，wx.navigateBack 会销毁一个页面层级

3 数据通信

3.1 页面初始数据通信

页面初始化的时间大致由页面初始数据通信时间和初始渲染时间两部分构成

减少传输数据量是降低数据传输时间的有效方式

3.2 更新数据通信

• 初始渲染完毕后，视图层可以在开发者调用 setData 后执行界面更新

• 逻辑层会将 setData 所设置的数据字段与 data 合并，使开发者可以用 this.data 读取到变更后的数据

• 提升数据更新的性能的原则：

  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中用到，而且它很长…………………………'
    }

  }
})

3.3 用户事件通信

异步的

• 降低延迟时间的方法

  1. 去掉不必要的事件绑定从而减少通信的数据量和次数

  2. 事件绑定时需要传输 target 和 currentTarget 的 dataset，因而不要在节点的 data 前缀属性中放置过大的数据

4 视图层渲染

视图层在接收到初始数据（data）和更新数据（setData数据）时，需要进行视图层渲染

4.1 初始渲染

视图层初始渲染的流程中，时间开销大体上与节点数中节点的总量成正比例关系

减少 WXML 中节点的数量可以有效降低初始渲染和重渲染的时间开销，提升渲染性能

4.2 重渲染

• 每次应用 setData 数据时，都会执行重渲染来更新界面

在进行当前节点树与新节点树的比较时，会着重比较 setData 数据影响到的节点属性。因而，去掉不必要设置的数据、减少 setData 的数据量也有助于提升这一个步骤的性能。