微信小程序的性能优化

文章目录

小程序的启动分包加载小程序代码包的大小限制常规的控制代码包大小的方法页面和Page 构造器的运行逻辑 页面层级数据通信js中提高数据更新速度的方法js中提升数据更新性能wxml 中提高数据更新速度的方法 兼容性当前手机的信息 版本兼容

小程序的启动

在小程序启动时，微信会为小程序展示一个固定的启动界面，界面内包含小程序的图标、名称和加载提示图标。

分包加载

采用分包时，小程序的代码包有两种：

一个“主包”，包含小程序启动时会马上打开的页面代码和相关资源。多个“分包”，包含其余的代码和资源。

这样，小程序启动时，只需要先将主包下载完成，就可以立刻启动小程序，从而降低小程序代码包的下载时间。 app.json 中的配置：

{ "pages":["pages/index/index","pages/logs/logs"], "subPackages": [ { "root": "packageA", "pages": [“pages/apple/apple"] }, { "root": "packageB", "pages": ["pages/banana/banana"] } ] }

小程序代码包的大小限制

单个分包/主包大小不能超过 2M整个小程序所有分包大小不超过 16M

常规的控制代码包大小的方法

精简代码，去掉不必要的WXML结构和未使用的WXSS定义。减少在代码包中直接嵌入的资源文件。压缩图片，使用适当的图片格式。分包加载

页面和Page 构造器的运行逻辑

一个页面的多次显示，并不会使得这个页面的JS文件被执行多次，而只会根据初始数据再生成了一个Page()实例。 例如，页面A使用wx.navigateTo 跳转到页面B，再使用wx.navigateTo跳转到页面A。 此时页面栈中有三个页面：A、B、A。 页面栈中的两个A页面的实例，将共享它的JS文件中除Page构造器以外的变量。 有经验的开发者可以很好的利用这个特性，但经验不足开发者就会错误地共享出一些变量，因而使用时要小心。

页面层级

在视图层内，小程序的每一个页面都独立运行在一个页面层级上。

小程序启动时仅有一个页面层级，每次调用wx.navigateTo，都会新建一个页面层级； 相对地，wx.navigateBack会销毁一个页面层级。对于每一个新的页面层级，视图层都需要进行一些额外的准备工作。

在小程序启动前，微信会提前准备好一个页面层级用于展示小程序的首页。

除此以外，每当一个页面层级被用于渲染页面，微信都会提前开始准备一个新的页面层级，使得每次调用wx.navigateTo 都能够尽快展示一个新的页面。

数据通信

在每个小程序页面的生命周期中，存在着若干次页面数据通信： 逻辑层向视图层发送页面数据（setData） 视图层向逻辑层反馈数据和用户事件 (data-key、bind:*)

js中提高数据更新速度的方法

多次setData合并成一次setData调用，不要过于频繁调用setData。数据通信的性能与数据量正相关，因而如果有一些数据字段不在界面中展示，且数据结构比较复杂或包含长字符串，则不应使用setData来设置这些数据。与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其它字段下。

js中提升数据更新性能

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 中提高数据更新速度的方法

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

兼容性

当前手机的信息

使用 wx.getSystemInfo() 或者 wx.getSystemInfoSync() 可以获取当前手机的信息。如：

{ brand: "iPhone", // 手机品牌 model: "iPhone 6", // 手机型号 platform: "ios", // 客户端平台 system: "iOS 9.3.4", // 操作系统版本 version: "6.5.23", // 微信版本号 SDKVersion: "1.7.0", // 小程序基础库版本 language: "zh_CN", // 微信设置的语言 pixelRatio: 2, // 设备像素比 screenWidth: 667, // 屏幕宽度 screenHeight: 375, // 屏幕高度 windowWidth: 667, // 可使用窗口宽度 windowHeight: 375, // 可使用窗口高度 fontSizeSetting: 16 // 用户字体大小设置 }

wx.canIUse() 方法

wx.canIUse() 方法可以判断接口或者组件在当前宿主环境是否可用。

// 对象的属性或方法 wx.canIUse('console.log') wx.canIUse('CameraContext.onCameraFrame') wx.canIUse('CameraFrameListener.start') wx.canIUse('Image.src') // wx接口参数、回调或者返回值wx.canIUse('getSystemInfoSync.return.safeArea.left') wx.canIUse('getSystemInfo.success.screenWidth') wx.canIUse('showToast.object.image') wx.canIUse('onCompassChange.callback.direction') wx.canIUse('request.object.method.GET') // 组件的属性 wx.canIUse('live-player') wx.canIUse('text.selectable') wx.canIUse('button.open-type.contact')

版本兼容

在小程序管理后台设置“基础库最低版本设置”，可以达到不向前兼容的目的。

例如：你选择设置你的小程序只支持1.5.0版本以上的宿主环境，那么当运行着1.4.0版本宿主环境的微信用户打开你的小程序的时候，微信客户端会显示当前小程序不可用，并且提示用户应该去升级微信客户端。