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

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

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

• 翻开是一直白屏

• 翻开是loading态
  ，，，转好几圈

• 我的页面点了怎么跳转这么慢？？？？？
  ？

• 我的列表怎么越滑越卡？？？？？
  ？

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

• 启动加载性能

• 渲染性能

3. 启动加载性能

1. 首次加载

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

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

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

2. 加载顺序

小程序加载的顺序是怎样？？？？？
？

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

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

3. 控制包巨细

提升体验最直接的要领是控制小程序包的巨细
，，，这是最显而易见的

• 勾选开发者工具中“上传代码时
  ，，，压缩代码”选项
  ；；；；；
  ；

• 实时整理无用的代码和资源文件（包括无用的日志代码）

• 镌汰资源包中的图片等资源的数目和大。。。。。。ɡ砺凵铣诵con
  ，，，其他图片资源从网络下载）
  ，，，图片资源压缩率有限

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

4. 接纳分包加载机制

凭证营业场景
，，，将用户会见率高的页面放在主包里
，，，将会见率低的页面放入子包里
，，，按需加载
；；；；；
；

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

5 接纳分包预加载手艺

在4的基础上
，，，当用户点击到子包的目录时
，，，照旧有一个代码包下载的历程
，，，这会感受到显着的卡顿
，，，以是子包也不建议拆的太大
，，，虽然我们可以接纳子包预加载手艺
，，，并不需要比及用户点击到子包页面后在下载子包
，，，而是可以凭证后期数据
，，，做子包预加载
，，，将用户在领先页可能点击的子包页面先加载
，，，当用户点击后直接跳转
；；；；；
；

这种基于设置的子包预加载手艺
，，，是可以凭证用户网络类型来判断的
，，，当用户处于网络条件好时才预加载
；；；；；
；是无邪可控的

6. 接纳自力分包手艺

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

7. 首屏加载的优化建议

7.1 提前请求

异步请求可以在页面onLoad就加载
，，，不需要等页面ready后在异步请求数据
；；；；；
；虽然
，，，若是能在前置页面点击跳转时预请求目今页的焦点异步请求
，，，效果会更好
；；；；；
；

7.2 使用缓存

使用storage API, 对变换频率较量低的异步数据举行缓存
，，，二次启动时
，，，先使用缓存数据举行初始化渲染
，，，然后后台举行异步数据的更新
，，，这不但优化了性能
，，，在无网情形下
，，，用户也能很顺畅的使用到要害服务
；；；；；
；

7.3 阻止白屏

可以在前置页面将一些有用的字段带到目今页
，，，举行首次渲染（列表页的某些数据--> 详情页）
，，，没有数据的？？？？？
？榭梢跃傩泄羌芷恋恼嘉
，，，使用户不会期待的很焦虑
，，，甚至走了
；；；；；
；

7.4 实时反馈

实时的对需要用户期待的交互操作举行反馈
，，，阻止用户以为小程序卡了
，，，无响应

渲染性能优化

1. 小程序渲染原理

双线程下的界面渲染
，，，小程序的逻辑层和渲染层是脱离的两个线程。。。。。。在渲染层
，，，宿主情形会把WXML转化成对应的JS工具
，，，在逻辑层爆发数据变换的时间
，，，我们需要通过宿主情形提供的setData要领把数据从逻辑层转达到渲染层
，，，再经由比照前后差别
，，，把差别应用在原来的Dom树上
，，，渲染出准确的UI界面。。。。。。

剖析这个流程不难堪知：页面初始化的时间大致由页面初始数据通讯时间和初始渲染时间两部分组成。。。。。。其中
，，，数据通讯的时间指数据从逻辑层最先组织数据到视图层完全吸收完毕的时间
，，，数据量小于64KB时总时长可以控制在30ms内。。。。。。传输时间与数据量概略上泛起正相关关系
，，，传输过大的数据将使这一时间显著增添。。。。。。因而镌汰传输数据量是降低数据传输时间的有用方式。。。。。。

2. 阻止使用不当setData

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

2.1 不要过于频仍挪用setData
，，，应思量将多次setData合并成一次setData挪用
；；；；；
；

2.2 数据通讯的性能与数据量正相关
，，，因而若是有一些数据字段不在界面中展示且数据结构较量重大或包括长字符串
，，，则不应使用setData来设置这些数据
；；；；；
；

2.3 与界面渲染无关的数据最好不要设置在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中用到
，，，并且它很长…………………………'
    }

  }
})
复制代码

2.4 切勿在后台页面举行setData

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

3. 用户事务使用不当

视图层将事务反馈给逻辑层时
，，，同样需要一个通讯历程
，，，通讯的偏向是从视图层到逻辑层。。。。。。由于这个通讯历程是异步的
，，，会爆发一定的延迟
，，，延迟时间同样与传输的数据量正相关
，，，数据量小于64KB时在30ms内。。。。。。降低延迟时间的要领主要有两个。。。。。。

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

4. 视图层渲染原理

4.1首次渲染

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

在这整个流程中
，，，时间开销概略上与节点树中节点的总量成正比例关系。。。。。。因而镌汰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中
，，，并用新节点树替换旧节点树
，，，用于下一次重渲染。。。。。。

在举行目今节点树与新节点树的较量时
，，，会着重较量setData数据影响到的节点属性。。。。。。因而
，，，去掉不须要设置的数据、镌汰setData的数据量也有助于提升这一个方法的性能。。。。。。

5. 使用自界说组件

自界说组件的更新只在组件内部举行
，，，不受页面其他不可分内容的影响
；；；；；
；好比一些运营活动的准时？？？？？
？榭梢缘ザ莱槌隼
，，，做成一个准时组件
，，，准时组件的更新并不会影响页面上其他元素的更新
；；；；；
；各个组件也将具有各自自力的逻辑空间。。。。。。每个组件都划分拥有自己的自力的数据、setData挪用。。。。。。

6. 阻止不当的使用onPageScroll

每一次事务监听都是一次视图到逻辑的通讯历程
，，，以是只在须要的时间监听pageSrcoll

总结

小程序启动加载性能

• 控制代码包的巨细

• 分包加载

• 首屏体验（预请求
  ，，，使用缓存
  ，，，阻止白屏
  ，，，实时反馈

小程序渲染性能

• 阻止不当的使用setData

• 合理使用事务通讯

• 阻止不当的使用onPageScroll

• 优化视图节点

• 使用自界说组件