小程序初步优化

前言

由于小程序本身层面做了一些优化，展示比h5在某些更优。但目前随着代码量的增加，页面本身显示得越来越不“小程序”了。本次着手从表现层面进行优化。

现场

1. 首页列表越滚动越卡顿。
   在请求20次后几乎卡死，究其原因发现是业务调用setComponent时，框架onion在updateComponent设置过多数据导致 。每次重新set时，会把新增数据合并到原有的数据再重新调用setData，这样让数据量成倍增加，但渲染时间却如下图，超过1M报错
   
   image
   
   [图片来源网络]

• 优化前，时间呈上图函数增长。最后一条接近3s

  
  
  image

  • 优化后，render的时间比较平稳，维持50ms以下。

    
    
    image

• 优化方法

用一个新的数组来存储新增的数据，这样保证每次数据量体积稳定。

_updateComponent(name, indexs) {
    let data = {},
        newData = {},
        componentKey = 'components.' + name

    data[componentKey] = this.data.components[name]

    if (indexs && indexs.length) {

        Object.keys(data[componentKey]).forEach(key=>{
            if (indexs.indexOf(key) > -1){
                newData[componentKey + '.' + key] = data[componentKey][key];
            }
        })

        data = newData
    }

    this.setData(data)

  }

2.店铺首页
通过小程序模拟器的Audits检查页面问题

image

a.图片相关

• 大体积图片

  • 图片统一限高裁切，部分图片过大，占用内存资源。通过添加w和h参数对图片大小控制

• 图片文件格式

  • 判断是否支持webp？目前通过平台判断，非ios下则在图片链接后追加webp。当然更好的方式是通过加载是否支持webp的图片来实现，以后微信可能支持显示webp。

    function supportWebpBySystem() {
       supportWebp = false;
       wx.getSystemInfo({
           success: function(res){
               var platform = res.platform || '';

               if (platform.toLocaleLowerCase() !== 'ios') {
                   supportWebp = true;
               }
           },
           fail: function(){
               supportWebp = false;
           },
       });
   }

更好的方式

• 减少一次性图片请求
  • 使用图片懒加载。在未处理前最多同时请求30+张图片，这无论是在流量上还是性能上都有一些损失。由于我们采用组件开发的形式，考虑到一些特殊情况，所以在组件内部新增一个lazyLoad变量来控制懒加载。
    组件的每一个元素上都有一个唯一标示no，而它又作为class。这样就可以通过createIntersectionObserver来监听加载

用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
支持版本 >= 1.9.3

  function  createIntersectionObserver(){
       var self = this,
           key,
           id = this.id.replace('.','-'),
           lazyLoad = this.data.lazyLoad;

       setTimeout(() => {
           for(let i = 0;i < this._data.no; i++){

               key = id + '-' + i;
               (function(key){
                   wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe('.' + key, (res) => {
                       if (res.intersectionRatio > 0 && !lazyLoad[key]) {
                           self.setData({
                               ['lazyLoad.' + key] : true
                           });
                       }
                   });
               })(key);
           }
       }, 300);    // 延时是为了挂载完再监听，这里只是随便写的一个数字，具体挂载完的时间没有测试过
   }

b.变量管理
与UI没关系的变量，不通过setData来进行设置。直接通过变量_data来管理，这样既能减少调用setData的次数，又能缩小data的大小。

参考

【微信小程序】性能优化https://juejin.im/post/5b9f5d55e51d450e4006a9e5
彻底解决长列表页setData超过1M时报错和严重卡顿的问题