本文背景

学习小程序一年有余，陆陆续续发布过几个小程序，最近闲暇时间看了下，小程序官方提供的评测结果，有几个小程序被诊断为性能良好，顺着这条线做了下相关的优化工作，今天总结下我认为比较重要的一点。

本文内容

今天就根据诊断结果谈下具体的优化方向，本文只针对其中一个优化

存在将未绑定在 WXML 的变量传入 setData

setData 是小程序开发中使用最频繁的接口，setData操作会引起框架处理一些渲染页面的相关工作，一个未在页面结构绑定的变量意味着与界面渲染无关，传入不必要的setData会造成不必要的性能消耗。

常见的setData错误操作：

频繁的去setData，（页面不停的渲染，导致卡顿）

setData 都传递大量新数据。(渲染压力太大，会出现延迟，页面不显示的数据不要传递)

所有的变量都定义在data属性，进行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中用到，而且它很长…………………………'
    }
  }
})

其实对于这个优化我是非常有感受的，在我的答题小程序中，存在题库的概念，如果题库过大，比如一次加载100道题，这个放在this.data里面会导致页面非常卡顿，某些场景下，这个题库的信息完全不需要放在this.data里面，而是放在外部的this变量里面，如上面代码所示

本文总结 

官方测评能够非常精准的给出优化的方向，虽然目前几个小程序被诊断为性能良好，这个成绩相对来说还是不错，但是良好不是我们的目标，优秀才是。

通过本次优化希望在日常的开发中，将这种优化落到实处，不要等后面再返回来优化。

本文备注

如何利用开发者工具进行评测

评测步骤：

微信开发者工具­——》调试器——》Audits——》运行（操作）——》结束

点击运行以后，尽可能多的对小程序进行操作，最好覆盖全页面和所有的交互动作。操作完成以后，点击结束，出行评测结果以及评测的具体列表，需要优化的地方。