小程序优化

优化前: 分数低, 首页加载太多列表(几百个), 用户体验不好, 会卡顿


优化后: 分数提升, 体验较好, 系统比较顺畅, 不卡顿

主要措施:
1, 针对一开始就加载几百个列表的情况, 而且每个列表都有图片, 大大消耗了手机等的性能, 造成加载慢, 并且不能及时显示首屏;
所有采取以下措施:
一, 使用scroll-view, 并且自己实现一个分页, 一页只加载10个列表元素左右, 在用户滚动到底部, 触发抵达底部事件的时候, 才加载下一部分;
将保存的数组(总数据)和展示的数组分两个变量保存;
加载下一部分: 使用slice方法(不影响原数组), 并且当前页+1

if (this.data.mainActiveIndex === 0 &&
      this.data.activeId === '-2') {
        this.setData({
          curPage: this.data.curPage + 1,
          courses: this.data.allCourses.slice(0, this.data.curPage * this.data.pageCount)
        })
    }    

二, 使用图片懒加载, 在image组件加上lazy-load=“true”

在这个过程中, 因为scroll-view要求必须给定一个固定的高度, 所以我为了兼容就写了一个较大的高度值: 1300rpx;

但是当他切换菜单, 只有3-4个元素时, 因为1300rpx太高, 所以会出现下面的情况:

使用了flex布局, 但他换行了之后, 他均匀地发布在了这个高度上;
我使用了判断它有几个元素的方法, 小于4个的时候动态给他加上一个css类, 给他一个900rpx高度;
所以这样就正常了;

但当他只有1-2个元素时, 他还会居中, 这时就给他设置:

align-items: flex-start