微信小程序系列 — 微信小程序性能优化

本文主体内容转载自 【微信小程序】性能优化

微信小程序性能两个优化方向

• 启动加载性能
• 渲染性能

启动加载性能

第一层：减少小程序包加载时间

1. 控制小程序包大小

（1）勾选微信开发者工具的“压缩代码”选项，对代码进行压缩
（2）及时清理无用的代码和资源文件（包括无用的日志代码）
（3）减少资源包中的图片等资源的数量和大小（原则上：① 小 icon 放本地；② 其他图片资源从网络下载），图片资源压缩率有限

经过统计：对低于1MB的代码包，其下载时间可以控制在 929ms（iOS）、1500ms（Android）内

2. 分包加载机制

根据业务场景，将用户访问率高的页面放在主包里，将访问率低的页面放入子包里，按需加载；

使用分包时需要注意代码和资源文件目录的划分。启动时需要访问的页面及其依赖的资源文件应放在主包中
复制代码

当用户点击到子包的目录时，还是有一个代码包下载的过程，这会感觉到明显的卡顿，所以子包也不建议拆的太大。当然我们可以继续采用分包预加载技术进行优化

3. 分包预加载技术

并不需要等到用户点击到子包页面后在下载子包，而是可以根据后期数据，做子包预加载，将用户在当先页可能点击的子包页面先加载，当用户点击后直接跳转；

这种基于配置的子包预加载技术，是可以根据用户网络类型来判断的，当用户处于网络条件好时才预加载；是灵活可控的

第二层：减少首屏加载时间（无论是主页还是子页）

1. 提前异步请求

页面跳转时预请求当前页的核心异步请求 > onLoad 进行异步请求 > onReady 进行异步请求

2. 利用缓存

利用storage API, 对变动频率比较低的异步数据进行缓存，二次启动时，先利用缓存数据进行初始化渲染，然后后台进行异步数据的更新，这不仅优化了性能，在无网环境下，用户也能很顺畅的使用到关键服务；

3. 懒加载优化

提前加载用户手机屏幕上下三屏的内容，监听用户的滑动事件再继续异步请求加载

• 如果是列表，且每行高度一致，则可用乘法去算是否即将触底
• 如果是页面内容完全没有规律，则用屏幕高度来做计算，监听用户是否即将看到上下三屏以外的内容

渲染性能

本质上就是围绕 setData 进行优化

小程序双线程的设计：小程序是双线程的，每次的 setData 都会做两个工作：① 修改 data 中的数据；② 将 setData 的内容从逻辑层传输到渲染层

1. 将多次 setData 合并成一次 setData 调用；

2. 分配好数据的存放位置

与界面渲染无关的数据最好不要设置在 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. setData 进行局部刷新

场景需求：100 条数据，用户更改列表中某条数据，需要进行刷新：

优化前：直接异步请求获取最新的后台数据，直接 setData 替换 data 对象的 list 数组

优化后：只更新修改的字段：

this.setData({
    list[index] : newList[index]
})
复制代码

4. 多使用原生组件

原生组件就相当于基于微信客户端进行交互和数据传递，性能远比小程序端好