美文网首页
小程序初步优化

小程序初步优化

作者: zchub | 来源:发表于2019-01-18 08:43 被阅读0次

前言

由于小程序本身层面做了一些优化,展示比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时报错和严重卡顿的问题

相关文章

  • 小程序初步优化

    前言 由于小程序本身层面做了一些优化,展示比h5在某些更优。但目前随着代码量的增加,页面本身显示得越来越不“小程序...

  • 小程序优化

    https://github.com/tvfe/wxpage转...马克一下 有空研究研究来自http://wet...

  • 小程序优化

    1 数据优化,我这里分为两类 A渲染交互类,B数据提交类渲染类放在data 里面,交互类可以使用this.set...

  • 小程序优化

    内存预警 小程序提供了监听内存不足告警事件的 API:wx.onMemoryWarning[23],旨在让开发者收...

  • 微信小程序刷人气,【youtui2徽】刷小程序观看量的平台

    微信小程序买人气买人数买uv,微信youtui2 小程序直播数据优化,小程序直播流量提升,小程序直播间uv,小程序...

  • 微信小程序性能优化

    前言 2018年7月份微信公开课上的小程序专场中“小程序性能优化”模块中提到了小程序性能优化方面的知识,其中从启动...

  • 小程序初步运营方案

    小程序的运营方案有很多种,目前我们遇到两个事情需要解决:1.问答的内容,这块也是大家比较关心的话题。内容的定位和细...

  • 啃完这份Java调优笔记,阿里三面我让面试官JVM快了近十倍,直

    Java程序性能优化是一个永远逃不开的话题,优化无处不在!一个偶然间,小编得到了一份Java程序性能优化的笔记,小...

  • (2)Angular的开发

    什么是 ReactNative应用, 小程序与RN的关系 native端优化 Js端优化 ReactNative是...

  • 小程序基础[01]-小程序开发的基础知识

    本文介绍在开发微信小程序需要的初步知识。 1.0 简单说明 微信小程序于2016年9月21日内测。 微信小程序是一...

网友评论

      本文标题:小程序初步优化

      本文链接:https://www.haomeiwen.com/subject/qsegdqtx.html