小程序性能优化总结

原文链接： https://juejin.im/post/5c35e83a6fb9a049d2363eac

历史总结：

• 小程序倒计时深究
• 小程序实战踩坑之B2B商城项目总结
• 初试小刀自我简历小程序

启动加载优化

在小程序启动时，微信会在背后完成几项工作：下载小程序代码包、加载小程序代码包、初始化小程序首页。 初始化小程序环境是微信环境做的工作,我们只需要控制代码包大小，和通过一些相关的缓存策略控制，和资源控制，逻辑控制，分包加载控制来进行启动加载优化。

• 勾选开发者工具中， 上传时压缩代码（若采用wepy高级版本，自带压缩，请按官网文档采取点击）
• 精简代码，去掉不必要的WXML结构和未使用的WXSS定义。
• 减少在代码包中直接嵌入的资源文件。（比如全国地区库，微信有自带的，在没必要的时候，勿自用自己的库）
• 及时清理无用的资源（js文件、图片、demo页面等）
• 压缩图片，使用适当的图片格式，减少本地图片数量等
• 如果小程序比较复杂，优化后的代码总量可能仍然比较大，此时可以采用分包加载的方式进行优化，分包加载初始化时只加载首评相关、高频访问的资源，其他的按需加载。
• 提前做异步请求，页面最好在onLoad时异步请求数据，不要在onReady时请求
• 启用缓存数据策略，请求时先展示缓存内容，让页面尽快展示，请求到最新数据之后再刷新
• 避免白屏，使用骨架屏等

数据通信优化

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

• 不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用；
• 数据通信的性能与数据量正相关，因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串，则不应使用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中用到，而且它很长…………………………'
    }

  }
})
复制代码

事件通信优化

视图层会接受用户事件，如点击事件、触摸事件等。当一个用户事件被触发且有相关的事件监听器需要被触发时，视图层会将信息反馈给逻辑层。这个反馈是异步的，会产生延迟，降低延迟的方法有两个：

• 去掉不必要的事件绑定（WXML中的bind和catch），从而减少通信的数据量和次数；
• 事件绑定时需要传输target和currentTarget的dataset，因而不要在节点的data前缀属性中放置过大的数据。

渲染优化

• 页面方法onPageScroll使用， 每次页面滚动都会触发，避免在里面写过于复杂的逻辑 ，特别是一些执行重渲染页面的逻辑（另外，可以看我的文章——移动端滚动研究，说明了在滚动的情况下导致的渲染性能低下的各种分析和应付方法总结）
• 在进行视图重渲染的时候，会进行当前节点树与新节点树的比较，去掉不必要设置的数据、减少setData的数据量也有助于提升这一个步骤的性能。