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

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

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

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() //从对象中获取已加载好的数据
      }
    });
复制代码

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

转载于:https://juejin.im/post/5bd7159d5188250ef70597b3