微信小程序开发：性能优化总结

启动加载优化

小程序启动时，微信会执行几个后台任务：下载小程序代码包、加载小程序代码包、并初始化小程序首页。初始化小程序环境是微信环境的工作。我们只需要通过一些相关的缓存策略检查、资源控制、逻辑控制、分包加载控制来控制代码包大小并优化启动时的加载即可。

• 检查开发者工具，在上传时对代码进行压缩（如果你使用的是wepy高级版，自带压缩，请点击官网文档）
• 精简代码，去掉不必要的WXML结构和未使用的WXSS定义。
• 减少直接嵌入代码包中的源文件数量。 （比如微信有自己的库，非必要就不要使用自己的库）
• 及时清理无用资源（js文件、图片、演示页等）
• 压缩图片和适当使用图片大小、减少本地图片数量等。
• 如果小程序比较复杂，优化后的代码总量可能还是比较大。此时可以使用分包加载来进行优化。初始化分包加载时，只加载第一条评论。相关且常用的资源，其他资源按需加载。
• 提前创建异步请求。最好的部分是页面在 onLoad 期间异步请求数据。 onReady期间不要请求数据。
• 启用缓存数据策略。请求时，先显示缓存的内容，以便尽快提供页面服务。请求最新数据后刷新。
• 避免白屏、使用骨架屏等。

优化数据通信

为了提高数据更新的性能，开发者在执行setData调用时应遵循以下原则：

• 不要过于频繁地调用setData 。考虑将多个 setData 调用连接成一个 setData 调用；
• 数据通信性能与数据量正相关，因此如果存在界面中未显示的数据字段且数据结构复杂或包含长字符串，则不应该使用setData来设置该数据；
• 数据中最好不要设置与界面显示无关的数据。您可以考虑在页面对象的其他字段中设置此字段。

提高数据更新性能的代码示例：

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中的绑定和陷阱），这样可以减少通信数据量和数量；
• Event target 和 currentTarget 数据集必须在绑定时发送，所以不要在节点的 dataprefix 属性中放入太大的数据。

显示优化

• 采用分页方法onPageScroll。每次页面滚动时都会激活它。避免在里面写过于复杂的逻辑，尤其是照顾页面重新渲染的逻辑（另外，你可以阅读我的文章——移动端滚动研究，里面总结了渲染性能低下导致滚动的各种分析和应对方法）
• 重新显示视图时，会将当前节点树与新节点树进行比较，以删除不必要的数据。设置数据并减少setData中的数据量也将有助于提高这一步的性能。

作者：铭牌饼干
链接：https://juejin.im/post/5c35e83a6fb9a049d2363eac
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。