js-性能优化之列表提前加载

前言

在移动端加载新的数据一般是通过触底后触发事件并在该事件中进行获取新数据的操作，这种操作逻辑是使用最为广泛的。但是这种操作只有用户真正触底了，才会触发，并且之后才会发送获取新数据的请求，而在获取新数据这一过程中，用户需要等待，会降低用户体验，而这就是我们需要优化的地方，因此我们在这里使用预加载，为用户提前加载数据。

当然用预加载技术不能盲目地提前为用户加载将来的数据，盲目加载数据只会造成服务器压力增大。因此我们需要预测用户的行为，而预测用户行为需要标准。例如在实际列表预加载情况中，我们可以根据用户下滑列表项的个数判断是否触发新数据请求的发送。假设页面首次加载了10条数据，则有10个列表项，我们可以将触发预加载的标准设为用户浏览了6条数据后触发新数据的获取。

预加载实现-列表项高度相同

微信小程序代码实现

<!-- wxml -->
<view class="container">
  <!-- 书籍列表 -->
  <block wx:for="{{books}}" wx:key="id">
    <custom-book height="{{itemHeight}}" book="{{item}}" />
  </block>
  <custom-page-end hidden="{{hide}}" wx:if="{{total === books.length}}" />
  <custom-page-end wx:else endInfo="加载中..." />
</view>

custom-book 以及 custom-page-end 都是自定义的组件

custom-book 用于显示一本书籍所要展示的基本信息

custom-page-end 用于页面加载和结束提示

// 节流函数
function throttle(fn, delay) {
    let timer = null
    return function () {
        const self = this, args = arguments;
        if (!timer) {
            fn.call(self, args)
            timer = setTimeout(() => {
                timer = null
            }, delay);
        }
    }
}

// 是否在发请求
let flag = false
Page({
    data: {
        //书籍列表
        books: [],
        // 列表项高度
        itemHeight: 135,
    },

    // 页面加载发起获取书籍数据请求
    onLoad: function () {
        this.getBooks()
    },

    // 获取书籍,每次获取10条数据
    async getBooks() {
        ...
        flag = false
    },

    // 监听页面滚动，并进行节流
    onPageScroll: throttle(function (e) {
        // scrollTop是页面滚动的距离
        const scrollTop = e[0].scrollTop
        // 当前列表的长度
        const len = this.data.books.length

        // 判断是否到达该触发事件的位置
        // 并且通过flag判断是否正在发送请求，如果正在发送请求则无法再发送请求
        if (scrollTop > (len - 7) * this.data.itemHeight && !flag) {
            flag = true
            this.getBooks()
        }
    }, 100),
  })

传送门>>性能优化之节流

整体的逻辑是在进入页面的时候执行 onload 事件，在该事件中发送请求初始化书籍列表10条数据。开始滚动屏幕如下图

(len - 7) * this.data.itemHeight 的含义就是每次当前列表还剩2条数据没有显示时，触发获取新数据的请求，所以对于第一次而言，对应的scrollTop的值其实只是滚动3条数据的高度，只要scrollTop大于3条数据的高度且flag为false就会发送请求，因为一开始len的值为10；对于第二次而言，len的值为20，所以scrollTop对应13条数据的高度；以此类推。

flag变量的作用就是防止已经在发请求的情况下，用户又滚动页面再次发送请求，这样会导致，发送两次相同的请求，结果就是返回10条数据后又返回相同的10条数据。

最终效果如下（上面未使用预加载，下面使用预加载）：


预留多少条数据发送请求取决于服务器的配置，并且需要自己进行多次测试和微调。