滚动无限加载极致优化方案(讨论优化方案非原理)

1,850 阅读2分钟

本文目的:讨论记录滚动加载的优化方案

本文不讨论上拉加载的实现及原理,这样的轮子已有很多。对于任何滚动加载的实现,都避不开以下几点:

  1. 监听滚动事件,设置临界点
  2. 滚动到达临界点,触发加载事件,异步获取数据
  3. DOM渲染数据

不难发现,当快速滑动造成卡顿的过程中,由于滚动太快,触发加载事件和滑到底的时间间隔太短,不得不等待数据的加载,导致内容渲染慢的原因很大可能是由于第二步,接口本身速度影响了后续的dom渲染速度。而dom渲染在普通浏览器中已经非常优秀,除了当内容在含有大部分图片的时候可能会有闪动现象(如电商网站),对此总结出数据预加载方案。本方案非完美解决各种加载问题,只是在部分业务环境中可以进一步优化加载体验。

数据预加载,滚动渲染方案

方案主旨:提前请求数据,滚动触发dom渲染。触发加载事件时,省去请求数据的时间,直接从对象中获取数据渲染。

条件限制:

  1. 预加载的终点需要根据实际业务做处理。
  2. 以迅雷不及掩耳的速度触发加载事件,导致预加载数据没有到位。无法加载(暂未想到优化方法)

代码逻辑:加载第一页数据后,触发回调并递归回调,不停的往前加载数据,须设置终点或者中间休息点(未想到好名字),而当滚动加载事件触发时,从已加载好的数据中取出数据并渲染,可以节约该页数据的请求时间。 一个请求大概几十kb,也不会产生流量问题。

document.addEventListener('scroll', function (e) {
      let scrollHeight = document.body.scrollHeight
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollHeight - scrollTop < 2000) {  //触发滚动条件
        if (_this.lock) return  //加锁
        if (_this.preLoadList.length === 0) return
        _this.getDataFromPre() //从对象中获取已加载好的数据
      }
    });

该方案非完美方案,但是确实可以解决部分对加载速度极致要求的场景。在无法要求后端的情况下,改变前端的实现来优化加载速度。