本文目的:讨论记录滚动加载的优化方案
本文不讨论上拉加载的实现及原理,这样的轮子已有很多。对于任何滚动加载的实现,都避不开以下几点:
- 监听滚动事件,设置临界点
- 滚动到达临界点,触发加载事件,异步获取数据
- DOM渲染数据
不难发现,当快速滑动造成卡顿的过程中,由于滚动太快,触发加载事件和滑到底的时间间隔太短,不得不等待数据的加载,导致内容渲染慢的原因很大可能是由于第二步,接口本身速度影响了后续的dom渲染速度。而dom渲染在普通浏览器中已经非常优秀,除了当内容在含有大部分图片的时候可能会有闪动现象(如电商网站),对此总结出数据预加载方案。本方案非完美解决各种加载问题,只是在部分业务环境中可以进一步优化加载体验。
数据预加载,滚动渲染方案
方案主旨:提前请求数据,滚动触发dom渲染。触发加载事件时,省去请求数据的时间,直接从对象中获取数据渲染。
条件限制:
- 预加载的终点需要根据实际业务做处理。
- 以迅雷不及掩耳的速度触发加载事件,导致预加载数据没有到位。无法加载(暂未想到优化方法)
代码逻辑:加载第一页数据后,触发回调并递归回调,不停的往前加载数据,须设置终点或者中间休息点(未想到好名字),而当滚动加载事件触发时,从已加载好的数据中取出数据并渲染,可以节约该页数据的请求时间。 一个请求大概几十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() //从对象中获取已加载好的数据
}
});
复制代码
该方案非完美方案,但是确实可以解决部分对加载速度极致要求的场景。在无法要求后端的情况下,改变前端的实现来优化加载速度。