小程序提高性能的几种写法(实用篇)

1,654 阅读3分钟

这是我参与新手入门的第3篇文章

任何优秀的大软件里面都是一个优秀的小程序。
点完赞,在查看哦

setData

  • 频繁使用setData会造成js阻塞问题,甚至卡顿,崩溃(崩溃没试过哈);所以我们应该如何用正确的姿势提高性能呢?
      1. 尽量把需要setData的内容放到一起setData,不要出现一个函数多个或者同时使用setData;
      1. 更新对象内的某个值,不应该整个对象重新更新,只需要更新对应的值即可,例如
        this.setData({'userInfo.headImg': '更新的内容'})
      1. 如果是列表数据,需要改变某个值变成true,也不应该全部数据更新一遍,只需要更新某一个值即可,例如
        this.setData({[`list[${index}].show`]: true})
      1. 页面不需要渲染的数据,尽量不要写在js里面的data里面,你可以定义一个全局参数都可以或者this.timer等生成一个全局变量;
      1. setData单次不能超过1M,超过会导致设置不成功,建议分页数据可以使用二维数组设置,例如
    // 1.通过一个二维数组来存储数据
    let feedList = [[array]];
    // 2.维护一个页面变量值,加载完一次数据page++
    let page = 1
    // 3.页面每次滚动到底部,通过数据路径更新数据
    onReachBottom:()=>{
        fetchNewData().then((newVal)=>{
            this.setData({
                ['feedList[' + (page - 1) + ']']: newVal,
            })
        }
    }
    // 4.最终我们的数据是[[array1],[array2]]这样的格式,然后通过wx:for遍历渲染数据
    

relativeToViewport

  • 我们会发现很多时候,列表展示都是图文展示,而图片后端又没有提供缩略图,这会导致浏览器一次请求多张图片会非常消耗http请求,并且浏览器也有请求数量限制,例如chrome浏览器就限制一次性最多6个,严重还会影响我们业务接口请求,这时我们使用IntersectionObserver就太美妙了
    • 解决思路
    1. 先创建对象实例wx.createIntersectionObserver();
    2. 用数据列表遍历监听页面渲染的元素;
    3. 条件判断,动态设置状态显示图片,如果返回滚动则过滤不需要在setData,减轻js工作任务; js代码
     data: {
         list: [ // 测试数据自己随便造
          {id: 0, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'},
          {id: 1, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'},
          {id: 2, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'},
        ]
     },
     onReady() {
        let list = this.data.list;
        list.forEach((item,index)=>{ // 遍历监听元素在页面的位置
          wx.createIntersectionObserver().relativeToViewport({bottom: 0}).observe(`.img-${index}`,res=>{
              if (res.intersectionRatio > 0 && !list[index].show){
                // intersectionRatio值大于0,说明元素出现在视图中了
                // console.log(item, 'list', res)
                  this.setData({
                      [`list[${index}].show`]: true
                  })
              }
          })
        })
      },

wxml代码

   <view>
    <block wx:for="{{list}}" mode="aspectFill" wx:key="index">
      <view class="test-img img-{{index}}">
        <image class="image" wx:if="{{item.show}}" src="{{item.url}}"></image>
      </view>
    </block>
  </view>

wxss代码

.test-img{
  width: 600rpx;
  height: 400rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.image{
  width: 100%;
}

onPageScroll

  • 这个监听页面滚动事件,输出顶部滚出页面多少距离,单位是px;这个事件非必要时不要写也不要输出内容,这样会很消耗性能,如果必须要使用到,我们要学会写节流或者防抖事件,减少过快的去setData;下面代码是网上复制,结合自己业务改造下即可
// 防抖
function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 处理函数
function handle() {    
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

// 节流throttle代码(定时器):
var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

代码分包

  • 代码肯定是越写越多,需求也是越来越多的,小程序单个分包最大只能是2M,这就不能让我们的业务代码都写在主包,这会导致我们无法提交代码,并且也会导致我们打开小程序会很慢,体验很差。
  • 为了解决这个问题,微信提供了小程序总共代码包支持最大16M,还支持我们分包功能,这样我们就可以开发更强大的功能,分包又分为普通分包独立分包,他们又是什么关系,有何不同?
    • 分包:分包就是一个可以节省主包代码的一个普通分包,启动分包页面,会把主包下载,普通分包可以使用主包的 js 文件、template、wxss、自定义组件、插件等
    • 独立分包:独立分包不依赖主包即可运行,不需要下载主包,可以很大程度上提升分包页面的启动速度,固并不能使用主包的 js,组件,wxss,插件等
    • 预加载:分包后,如果想打开主包后,跳转不出现加载模块中的等待提示,可以使用预加载,这样就可以做到无缝跳转,增强了用户体验,跳转就像主包跳转主包页面一样顺滑。更多分包讲解请查看微信文档
{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA", // 分包
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB", // 独立分包
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true // 独立分包的标志
    }
  ],
 "preloadRule": { // 预加载写法
    "pages/index": {
      "network": "all",
      "packages": ["moduleA"] // 需要预加载的分包
    },
    "pages/logs": {
      "packages": ["moduleB"] // 需要预加载的分包
    }
  }
}

结束

本次写作先到这里,更多丰富好用的内容,请等待下一期~

都看完了,别忘了给个赞再走~,创作不容易,谢谢哦