微信小程序：一些运行细节及针对性的优化策略

妖狐艹你老母 2022-05-20 06:56 114阅读 0赞

原文链接：[https://juejin.im/post/5b496d5d5188251a90187635][https_juejin.im_post_5b496d5d5188251a90187635]

# 为什么要做性能优化？ #

一切性能优化都是为了体验优化

## 1. 使用小程序时，是否会经常遇到如下问题？ ##

*  打开是一直白屏
 *  打开是loading态，转好几圈
 *  我的页面点了怎么跳转这么慢？
 *  我的列表怎么越滑越卡？

## 2. 我们优化的方向有哪些？ ##

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

## 3. 启动加载性能 ##

### 1. 首次加载 ###

你是否见过小程序首次加载时是这样的图？

![小程序加载][16496d6e26e5139c_w_1328_h_726_f_png_s_124418]

这张图中的三种状态对应的都是什么呢？

小程序启动时，微信会为小程序展示一个固定的启动界面，界面内包含小程序的图标、名称和加载提示图标。此时，微信会在背后完成几项工作：`下载小程序代码包`、`加载小程序代码包`、`初始化小程序首页`。下载到的小程序代码包不是小程序的源代码，而是编译、压缩、打包之后的代码包。

### 2. 加载顺序 ###

小程序加载的顺序是如何？

微信会在小程序启动前为小程序准备好通用的运行环境。这个运行环境包括几个供小程序使用的线程，并在其中完成小程序基础库的初始化，预先执行通用逻辑，尽可能做好小程序的启动准备。这样可以显著减少小程序的启动时间。

![小程序运行][16496d8fc5d55108_w_1492_h_498_f_png_s_451503]  
通过2，我们知道了，问题1中第一张图是`资源准备`（代码包下载）；第二张图是`业务代码的注入以及落地页首次渲染`；第三张图是`落地页数据请求时的loading态`（部分小程序存在）

### 3. 控制包大小 ###

提升体验最直接的方法是控制小程序包的大小，这是最显而易见的

*  勾选开发者工具中“上传代码时，压缩代码”选项；
 *  及时清理无用的代码和资源文件（包括无用的日志代码）
 *  减少资源包中的图片等资源的数量和大小（理论上除了小icon，其他图片资源从网络下载），图片资源压缩率有限

从开发者的角度看，控制代码包大小有助于减少小程序的启动时间。**对低于1MB的代码包，其下载时间可以控制在929ms（iOS）、1500ms（Android）内**。

### 4. 采用分包加载机制 ###

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

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

### 5 采用分包预加载技术 ###

在4的基础上，当用户点击到子包的目录时，还是有一个代码包下载的过程，这会感觉到明显的卡顿，所以子包也不建议拆的太大，当然我们可以采用子包预加载技术，并不需要等到用户点击到子包页面后在下载子包，而是可以根据后期数据，做子包预加载，将用户在当先页可能点击的子包页面先加载，当用户点击后直接跳转；

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

### 6. 采用独立分包技术 ###

目前很多小程序`主包+子包`（2M+6M）的方式，但是在做很多运营活动时，我们会发现活动（红包）是在子包里，但是运营、产品投放的落地页链接是子包链接，这是的用户在直达落地时，必须先下载主包内容（一般比较大），在下载子包内容（相对主包，较小），这使得在用户停留时间比较短的小程序场景中，用户体验不是很好，而且浪费了很大部分流量；

![独立分包][16496dcc188c60ce_w_1550_h_558_f_png_s_709329]  
可以采用独立分包技术，区别于子包，和主包之间是无关的，在功能比较独立的子包里，使用户只需下载分包资源；

### 7. 首屏加载的优化建议 ###

**7.1 提前请求**

异步请求可以在页面onLoad就加载，不需要等页面ready后在异步请求数据；当然，如果能在前置页面点击跳转时预请求当前页的核心异步请求，效果会更好；

**7.2 利用缓存**

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

**7.3 避免白屏**

可以在前置页面将一些有用的字段带到当前页，进行首次渲染（列表页的某些数据–> 详情页），没有数据的模块可以进行骨架屏的占位，使用户不会等待的很焦虑，甚至走了；

**7.4 及时反馈**

及时的对需要用户等待的交互操作进行反馈，避免用户以为小程序卡了，无响应

--------------------

## 渲染性能优化 ##

### 1. 小程序渲染原理 ###

双线程下的界面渲染，小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面。

![16496e7400dad068_w_1188_h_720_f_png_s_308473][]  
分析这个流程不难得知：页面初始化的时间大致由页面初始数据通信时间和初始渲染时间两部分构成。其中，数据通信的时间指数据从逻辑层开始组织数据到视图层完全接收完毕的时间，**数据量小于64KB时总时长可以控制在30ms内**。传输时间与数据量大体上呈现正相关关系，传输过大的数据将使这一时间显著增加。因而减少传输数据量是降低数据传输时间的有效方式。

![16496e825cee43c7][]

### 2. 避免使用不当setData ###

在数据传输时，逻辑层会执行一次`JSON.stringify`来去除掉`setData`数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将`setData`所设置的数据字段与`data`合并，使开发者可以用`this.data`读取到变更后的数据。因此，为了提升数据更新的性能，开发者在执行`setData`调用时，最好遵循以下原则：

**2.1 不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用；**

![16496e9068bf67a0_w_1518_h_420_f_png_s_403635][]

**2.2 数据通信的性能与数据量正相关，因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串，则不应使用`setData`来设置这些数据；**

![16496e96ba489472_w_1920_h_447_f_png_s_410099][]

**2.3 与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下**

![16496ea22db88bad_w_1524_h_668_f_png_s_537101][]

提升数据更新性能方式的代码示例

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中用到，而且它很长…………………………'
        }
    
      }
    })

**2.4 切勿在后台页面进行setData**

在一些页面会进行一些操作，而到页面跳转后，代码逻辑还在执行，此时多个`webview`是共享一个js进程；后台的`setData`操作会抢占前台页面的渲染资源；

![16496eba8af3f2e3_w_1152_h_518_f_png_s_213837][]

![16496ebde23cc76e_w_1536_h_698_f_png_s_539785][]

### 3. 用户事件使用不当 ###

视图层将事件反馈给逻辑层时，同样需要一个通信过程，通信的方向是从视图层到逻辑层。因为这个通信过程是异步的，会产生一定的延迟，延迟时间同样与传输的数据量正相关，**数据量小于64KB时在30ms内**。降低延迟时间的方法主要有两个。

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

![16496ede21ab090e_w_567_h_303_f_png_s_4871][]

### 4. 视图层渲染原理 ###

**4.1首次渲染**

初始渲染发生在页面刚刚创建时。初始渲染时，将初始数据套用在对应的WXML片段上生成节点树。节点树也就是在开发者工具WXML面板中看到的页面树结构，它包含页面内所有组件节点的名称、属性值和事件回调函数等信息。最后根据节点树包含的各个节点，在界面上依次创建出各个组件。

![16496ee474d813c4_w_1178_h_873_f_png_s_8067][]

在这整个流程中，时间开销大体上与节点树中节点的总量成正比例关系。因而减少WXML中节点的数量可以有效降低初始渲染和重渲染的时间开销，提升渲染性能。

简化WXML代码的例子

<view data-my-data="{ {myData}}"> 
      <view class="my-class" data-my-data="{ {myData}}" bindtap="onTap">
        <text> 
          {
       {myText}}
        </text>
      </view>
    </view>
    
    
    
    <view class="my-class" data-my-data="{ {myData}}" bindtap="onTap">
      {
       {myText}}
    </view>

**4.2 重渲染**

初始渲染完毕后，视图层可以多次应用`setData`的数据。每次应用`setData`数据时，都会执行重渲染来更新界面。初始渲染中得到的data和当前节点树会保留下来用于重渲染。每次重渲染时，将`data`和`setData`数据套用在WXML片段上，得到一个新节点树。然后将新节点树与当前节点树进行比较，这样可以得到哪些节点的哪些属性需要更新、哪些节点需要添加或移除。最后，将`setData`数据合并到`data`中，并用新节点树替换旧节点树，用于下一次重渲染。

![16496ef7f84f795a_w_1178_h_873_f_png_s_30257][]

在进行当前节点树与新节点树的比较时，会着重比较`setData`数据影响到的节点属性。因而，去掉不必要设置的数据、减少`setData`的数据量也有助于提升这一个步骤的性能。

### 5. 使用自定义组件 ###

自定义组件的更新只在组件内部进行，不受页面其他不能分内容的影响；比如一些运营活动的定时模块可以单独抽出来，做成一个定时组件，定时组件的更新并不会影响页面上其他元素的更新；各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用。

![16496f0673926b22_w_1536_h_570_f_png_s_424226][]

### 6. 避免不当的使用onPageScroll ###

每一次事件监听都是一次视图到逻辑的通信过程，所以只在必要的时候监听pageSrcoll

![16496f0bcfc2266e_w_1552_h_622_f_png_s_527149][]

## 总结 ##

**小程序启动加载性能**

*  控制代码包的大小
 *  分包加载
 *  首屏体验（预请求，利用缓存，避免白屏，及时反馈

**小程序渲染性能**

*  避免不当的使用setData
 *  合理利用事件通信
 *  避免不当的使用onPageScroll
 *  优化视图节点
 *  使用自定义组件

[https_juejin.im_post_5b496d5d5188251a90187635]: https://juejin.im/post/5b496d5d5188251a90187635
[16496d6e26e5139c_w_1328_h_726_f_png_s_124418]: https://user-gold-cdn.xitu.io/2018/7/14/16496d6e26e5139c?w=1328&h=726&f=png&s=124418
[16496d8fc5d55108_w_1492_h_498_f_png_s_451503]: https://user-gold-cdn.xitu.io/2018/7/14/16496d8fc5d55108?w=1492&h=498&f=png&s=451503
[16496db4be99d15f_w_1546_h_652_f_png_s_501068]: https://user-gold-cdn.xitu.io/2018/7/14/16496db4be99d15f?w=1546&h=652&f=png&s=501068
[16496dc1e3611bee_w_1536_h_658_f_png_s_632388]: https://user-gold-cdn.xitu.io/2018/7/14/16496dc1e3611bee?w=1536&h=658&f=png&s=632388
[16496dcc188c60ce_w_1550_h_558_f_png_s_709329]: https://user-gold-cdn.xitu.io/2018/7/14/16496dcc188c60ce?w=1550&h=558&f=png&s=709329
[16496e7400dad068_w_1188_h_720_f_png_s_308473]: https://user-gold-cdn.xitu.io/2018/7/14/16496e7400dad068?w=1188&h=720&f=png&s=308473
[16496e825cee43c7]: https://user-gold-cdn.xitu.io/2018/7/14/16496e825cee43c7
[16496e9068bf67a0_w_1518_h_420_f_png_s_403635]: https://user-gold-cdn.xitu.io/2018/7/14/16496e9068bf67a0?w=1518&h=420&f=png&s=403635
[16496e96ba489472_w_1920_h_447_f_png_s_410099]: https://user-gold-cdn.xitu.io/2018/7/14/16496e96ba489472?w=1920&h=447&f=png&s=410099
[16496ea22db88bad_w_1524_h_668_f_png_s_537101]: https://user-gold-cdn.xitu.io/2018/7/14/16496ea22db88bad?w=1524&h=668&f=png&s=537101
[16496eba8af3f2e3_w_1152_h_518_f_png_s_213837]: https://user-gold-cdn.xitu.io/2018/7/14/16496eba8af3f2e3?w=1152&h=518&f=png&s=213837
[16496ebde23cc76e_w_1536_h_698_f_png_s_539785]: https://user-gold-cdn.xitu.io/2018/7/14/16496ebde23cc76e?w=1536&h=698&f=png&s=539785
[16496ede21ab090e_w_567_h_303_f_png_s_4871]: https://user-gold-cdn.xitu.io/2018/7/14/16496ede21ab090e?w=567&h=303&f=png&s=4871
[16496ee474d813c4_w_1178_h_873_f_png_s_8067]: https://user-gold-cdn.xitu.io/2018/7/14/16496ee474d813c4?w=1178&h=873&f=png&s=8067
[16496ef7f84f795a_w_1178_h_873_f_png_s_30257]: https://user-gold-cdn.xitu.io/2018/7/14/16496ef7f84f795a?w=1178&h=873&f=png&s=30257
[16496f0673926b22_w_1536_h_570_f_png_s_424226]: https://user-gold-cdn.xitu.io/2018/7/14/16496f0673926b22?w=1536&h=570&f=png&s=424226
[16496f0bcfc2266e_w_1552_h_622_f_png_s_527149]: https://user-gold-cdn.xitu.io/2018/7/14/16496f0bcfc2266e?w=1552&h=622&f=png&s=527149