性能优化之虚拟列表
场景
尽管接口做了分页处理，但请求次数过多时，页面渲染的结构即长列表，会造成性能损耗。
描述
虚拟列表，就是让数据在固定个数的结构上渲染，结构不发生改变，而对应结构上的数据发生变化。
例如，设定列表容器容纳十个子组件，页面初始第一个子组件渲染的数据索引为0，当页面下滑一个子组件高度时，将第一个 子组件渲染的数据改为索引为1。
简而言之，获取的长列表数据可以十分大，几百、几千——
而虚拟列表只节选其中连续的十个，进行渲染展示。
技术背景
Vue3 Ts
页面结构
<div id="virtual-list--container" @scroll="vaScrollHandler" :style="{ 'height': listHeight }">
<!-- 可视区 -->
<div id="main-list--box" ref="visibleArea">
<UserProfile :mode="0" v-for="(item, index) in fakeList" :key="index" :userInfo="item"></UserProfile>
</div>
</div>
/*
在上述结构中，首先通过获取可视区的ref，获取它的容器高度，
并除以虚拟列表总个数（10），得到每个子项的高度
*/
itemHeight.value = visibleArea.value?.clientHeight / 10
/*
其中itemCount表示列表中显示出来的个数，
比如8，表示列表总显示8个列表项，另2个总是由于滚动被遮住
*/
const listHeight = computed(() => itemCount * itemHeight.value + "px") // 展示的列表高度
逻辑实现
在页面下滑过程中，如果距离底部还有一个列表项的高度，并且满足请求条件，则发起请求、添加数据。
接着，如果发生触底，那么就去节选所有数据allList中相应的十个，进行渲染fakeList。
在页面下滑过程中，下滑了一个列表项的高度，其实就是虚拟列表结构整体渲染的数据的索引，都向后增加1位。
由于数据的更替，页面看起来就会闪烁，因此，此时需要做的就是通过scrollTop，纠正两个相同索引的数据，在前后两次页面渲染中的偏差。
对于向上滑动页面，同样的在触顶时更新渲染的数据fakeList，并修正偏差。
图示（来源掘金）
参数变量
const visibleArea = ref()
const itemHeight = ref(0) // 单个item高度
const itemCount = 8 // 列表展示的个数8，而非当前页总数10
const listHeight = computed(() => itemCount * itemHeight.value + "px") // 展示的列表高度
let startIndex = ref(0)
let endIndex = ref(9)
let isBottom = ref(false) // 触底节流阀
let allowPreRequest = ref(true) // 预加载阀
let initScrollTop = ref(0)
let hideCount = ref(0) // 由于滚动隐藏的列表项个数
let allList = reactive<Object[]>([]) // 所有数据
let fakeList = reactive<Object[]>([]) // 虚拟列表渲染数据
滚动监听函数
const vaScrollHandler = (e: any) => {
let { scrollTop, scrollHeight, clientHeight } = e.target
/*
step4：触底或触顶时：更新触底变量，以使数据能刷新
触底后修正了scrollTop，因此会进入这一层判断
*/
if (scrollTop.toFixed(2) == itemHeight.value || scrollTop == 0) {
isBottom.value = false
allowPreRequest.value = true
}
// 判断滚动方向
let direction = scrollTop - initScrollTop.value
initScrollTop.value = scrollTop
if (direction >= 0) {
// 更新触底变量，否则每次只能触顶后才能触底更新
isBottom.value = false
} else {
if (scrollTop == 0 && startIndex.value) {
onReachTop()
}
}
/*
step1：预加载下页数据（先）
allowPreRequest节流阀用于由于scrollTop等参数的误差导致的重复进入判断
*/
if (Math.ceil(scrollTop) + clientHeight >= Math.ceil(scrollHeight - itemHeight.value * 1) && allowPreRequest.value) {
/*
虚拟列表结束索引初始为9，每次触底都会更新endIndex的索引值（之后）
如果结束索引endIndex 和 所有数据allList最后位元素的索引一致，满足更新条件，请求数据
*/
if (endIndex.value == allList.length - 1) {
mockRequest()
.then((res: any) => {
res.forEach((item: any) => {
allList.push(item)
})
pageParam.pages++
})
}
allowPreRequest.value = false
}
/*
step2：触底判断（后）
同样，isBottom节流阀用途一致
*/
if (Math.ceil(scrollTop) + clientHeight == scrollHeight && !isBottom.value) {
onReachBotoom()
isBottom.value = true
}
/*
step3：触底后更新列表数据
*/
function onReachBotoom() {
hideCount.value = 10 - itemCount
// 更新虚拟列表起始索引
startIndex.value += hideCount.value - 1
endIndex.value += hideCount.value - 1
for (let i = 0; i < fakeList.length; i++) {
/*
这里是预防下滑速度过快，尽管成功发起了请求，
但触底更新时数据仍不存在，导致页面列表项展示undefined
*/
if (allList[i + startIndex.value]) fakeList[i] = allList[i + startIndex.value]
}
/*
hideCount虚拟列表隐藏的个数是2，则前面更新索引时，其实虚拟列表渲染的数据只是整体向后移动了一位
这里就是修正同一个数据的位移偏差，看起来不会抖
*/
e.target.scrollTop = itemHeight.value
}
/*
上拉时更新列表数据
*/
function onReachTop() {
startIndex.value -= hideCount.value
endIndex.value -= hideCount.value
for (let i = 0; i < fakeList.length; i++) {
fakeList[i] = allList[i + startIndex.value]
}
e.target.scrollTop = itemHeight.value
}
}
效果展示
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
