⑦ 性能优化

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 初始渲染

4.2 重渲染

• 每次应用

  setData

  数据时，都会执行重渲染来更新界面