小程序性能优化总结

历史总结:小程序

启动加载优化

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

  • 勾选开发者工具中, 上传时压缩代码(若采用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的数据量也有助于提高这一个步骤的性能。
相关文章
相关标签/搜索