不定高虚拟列表# 不定高虚拟列表
在前文的虚拟列表实现中，列表项高度itemSize都是固定的。
// template -> list-item
:style="{ height: itemSize + 'px', lineHeight: itemSize + 'px' }"
// export defualt -> data
itemSize: 50,
1
2
3
4
5
2
3
4
5
因此很多直接与 列表项高度itemSize 关联的属性，都很容易计算：
- 列表总高度
listHeight= listData.length * itemSize - 当前窗口偏移量
currentOffset= scrollTop - (scrollTop % itemSize) - 列表数据的开始/结束索引
start/end= ~~(scrollTop / itemSize) . . . . . .
但在实际情况中列表元素多为高度不固定的列表项，它可能是多行文本、图片之类的可变内容，如系统日志、微博等等。
# 方案
如何获取真实高度？
- 如果能获得列表项高度数组，真实高度问题就很好解决。但在实际渲染之前是很难拿到每一项的真实高度的，所以我们采用预估一个高度渲染出真实DOM，再根据DOM的实际情况去设置真实高度。
- 创建一个缓存列表，其中列表项字段为 索引、高度与定位，并预估列表项高度用于初始化缓存列表。在渲染后根据DOM实际情况更新缓存列表。
相关的属性该如何计算？
- 显然以前的计算方式都无法使用了，因为那都是针对固定值设计的。
- 于是我们根据缓存列表重写 计算属性、滚动回调函数，例如列表总高度的计算可以使用缓存列表最后一项的定位字段的值。
列表渲染的方式有何改变？
- 因为用于渲染页面元素的数据是根据 开始/结束索引 在 数据列表 中筛选出来的，所以只要保证索引的正确计算，那么渲染方式是无需变化的。
- 对于开始索引，我们将原先的计算公式改为：在 缓存列表 中搜索第一个底部定位大于 列表垂直偏移量 的项并返回它的索引。
- 对于结束索引，它是根据开始索引生成的，无需修改。
# 实现
# 预估&初始化列表
先设置一个虚拟 预估高度preItemSize，用于列表初始化。
同时维护一个记录真实列表项数据的 缓存列表positions。
data() {
return {
. . . . . .
// 预估高度
preItemSize: 50,
// 缓存列表
positions = [
// 列表项对象
{
index: 0, // 对应listData的索引
top: 0, // 列表项顶部位置
bottom: 50, // 列表项底部位置
height: 50, // 列表项高度
}
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
在创建组件时先用preItemSize对positions进行初始化，在后续更新时再进行替换。
created() {
this.initPositions(this.listData, this.positions)
},
methods: {
initPositions(listData, itemSize) {
this.positions = listData.map((item, index) => {
return {
index,
top: index * itemSize,
bottom: (index + 1) * itemSize,
height: itemSize,
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注：listData即数据列表，里面是每一项数据对应的内容。
列表总高度listHeight的计算方式改变为缓存列表positions最后一项的bottom：
computed: {
listHeight() {
// return this.listData.length * this.itemSize;
return this.positions[this.positions.length - 1].bottom;
},
}
1
2
3
4
5
6
2
3
4
5
6
# 更新真实数据
在每次渲染后，获取真实DOM的高度去替换positions里的预估高度。
∵ updated生命周期在数据变化视图更新过后触发所以能获取到真实DOM
∴ 我们利用Vue的updated钩子来实现这一功能
期间遍历真实列表的每一个节点，对比 节点 和 列表项 生成高度差dValue判断是否需要更新：
updated() {
this.$nextTick(() => {
// 根据真实元素大小，修改对应的缓存列表
this.updatePositions()
})
},
methods: {
updatePositions() {
let nodes = this.$refs.items;
nodes.forEach((node) => {
// 获取 真实DOM高度
const { height } = node.getBoundingClientRect();
// 根据 元素索引 获取 缓存列表对应的列表项
const index = +node.id
let oldHeight = this.positions[index].height;
// dValue：真实高度与预估高度的差值 决定该列表项是否要更新
let dValue = oldHeight - height;
// 如果有高度差 !!dValue === true
if(dValue) {
// 更新对应列表项的 bottom 和 height
this.positions[index].bottom = this.positions[index].bottom - dValue;
this.positions[index].height = height;
// 依次更新positions中后续元素的 top bottom
for(let k = index + 1; k < this.positions.length; k++) {
this.positions[k].top = this.positions[k-1].bottom;
this.positions[k].bottom = this.positions[k].bottom - dValue;
}
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
此外在更新完positions后，当前窗口偏移量currentOffset也要根据真实情况重新赋值:
updated() {
this.$nextTick(() => {
// 根据真实元素大小，更新对应的缓存列表
this.updatePositions()
// 更新完缓存列表后，重新赋值偏移量
this.currentOffset = this.getCurrentOffset()
})
},
methods: {
updatePositions() { //. . . }
getCurrentOffset() {
if(this.start >= 1) {
this.currentOffset = this.positions[this.start - 1].bottom
} else {
this.currentOffset = 0;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 重写滚动回调
滚动触发的回调函数里计算了 开始/结束索引start/end 和 当前窗口偏移量currentOffset ，现在高度不固定后都需要重新计算，而结束索引依赖于开始索引所以不需要修改。
# 重新计算 开始索引start
定高时我们不必建立数组（建立了也只是重复的数据），直接根据scrollTop与itemSize计算索引即可
this.start = ~~(scrollTop / this.itemSize);
1
但不定高时，只能带着scrollTop在列表中逐个寻找（后续使用搜索算法优化）。两个计算的最终目的都是找到当前位置对应的数据索引。
列表数据开始索引start的计算方法修改为：遍历 缓存列表positions 匹配第一个大于当前滚动距离scrollTop的项，并返回该项的索引。
mounted() {
. . . . . .
// 绑定滚动事件
let target = this.$refs.virtualList
let scrollFn = (event) => this.scrollEvent(event.target)
target.addEventListener("scroll", scrollFn);
},
methods: {
scrollEvent(target) {
const scrollTop = target.scrollTop;
// this.start = ~~(scrollTop / this.itemSize);
+ this.start = this.getStartIndex(scrollTop)
this.end = this.start + this.visibleCount;
this.currentOffset = scrollTop - (scrollTop % this.itemSize);
},
getStartIndex(scrollTop = 0) {
let item = this.positions.find(item => item && item.bottom > scrollTop);
return item.index;
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 重新计算 窗口偏移量currentOffset
滚动后立即根据positions的预估值（此时数据还未更新）计算窗口偏移量currentOffset：
scrollEvent() {
. . . . . .
// this.currentOffset = scrollTop - (scrollTop % this.itemSize);
this.currentOffset = this.getCurrentOffset()
},
1
2
3
4
5
2
3
4
5
# 优化
positions是遍历listData生成的，listData本是有序的，所以positions也是一个顺序数组。
Array.find方法 时间复杂度 O(n)O(n)O(n)，查找 索引start 效率较低 ❌
二分查找十分适合顺序存储结构 时间复杂度log2nlog_2{n}log2n，效率较高 ✔️
<script>
//. . . . . .
var binarySearch = function(list, target) {
const len = list.length
let left = 0, right = len - 1
let tempIndex = null
while (left <= right) {
let midIndex = (left + right) >> 1
let midVal = list[midIndex].bottom
if (midVal === target) {
return midIndex
} else if (midVal < target) {
left = midIndex + 1
} else {
// list不一定存在与target相等的项，不断收缩右区间，寻找最匹配的项
if(tempIndex === null || tempIndex > midIndex) {
tempIndex = midIndex
}
right--
}
}
// 如果没有搜索到完全匹配的项 就返回最匹配的项
return tempIndex
};
export default {
//. . . . . .
methods: {
//. . . . . .
getStartIndex(scrollTop = 0) {
// let item = this.positions.find(i => i && i.bottom > scrollTop);
// return item.index;
return binarySearch(this.positions, scrollTop)
}
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 滚动缓冲
# 分析
上文中，为了正确计算不定高列表项，同时在 updated生命周期 和 滚动回调 中增加了额外操作，这都增加了浏览器负担。
因此快速滚动列表时，我们很明显的观察到白屏闪烁的情况，即滚动后，先加载出白屏内容（没有渲染）然后迅速替换为表格内容，制造出一种闪烁的现象。
注：白屏闪烁是浏览器性能低导致的，事件循环中的渲染操作没有跟上窗口的滚动，额外操作只是加剧了这种情况。
# 方案
为了使页面平滑滚动，我们在原先的列表结构上再加入缓冲区，渲染区域由可视区+缓冲区共同组成，这给滚动回调和页面渲染更多处理时间。
用户在可视区滚动，脱离可视区后立即进入缓冲区，同时渲染下一部分可视区的数据。在脱离缓冲区后新的数据大概率也渲染完成了。
而缓冲区域包含多少个元素呢？
我们创建一个变量表示比例数值，这个比例数值是相对于 最大可见列表项数 的，根据这个 相对比例 和 开始/结束索引 计算上下缓冲区的大小。
对渲染流程有什么影响？
列表显示数据 原先是根据索引计算，现在额外加入上下缓冲区大小重新计算，会额外渲染缓冲元素。
# 实现
创建一个属性代表比例值：
data: {
bufferPercent: 0.5, // 即每个缓冲区只缓冲 0.5 * 最大可见列表项数 个元素
},
1
2
3
2
3
创建三个计算属性，分别代表 缓冲区标准多少个元素 + 上下缓冲区实际包含多少个元素：
computed: {
bufferCount() {
return this.visibleCount * this.bufferPercent >> 0; // 向下取整
},
// 使用索引和缓冲数量的最小值 避免缓冲不存在或者过多的数据
aboveCount() {
return Math.min(this.start, this.bufferCount);
},
belowCount() {
return Math.min(this.listData.length - this.end, this.bufferCount);
},
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
重写 列表显示数据visibleData 的计算方式：
computed: {
visibleData() {
// return this.listData.slice(this.start, this.end);
return this.listData.slice(this.start - this.aboveCount, this.end + this.belowCount);
},
}
1
2
3
4
5
6
2
3
4
5
6
因为多出了缓冲区域所以窗口偏移量currentOffset也要根据缓冲区的内容重新计算：
getCurrentOffset() {
if(this.start >= 1) {
// return this.positions[this.start - 1].bottom;
let size = this.positions[this.start].top - (
this.positions[this.start - this.aboveCount] ?
this.positions[this.start - this.aboveCount].top : 0);
// 计算偏移量时包括上缓冲区的列表项
return this.positions[this.start - 1].bottom - size;
} else {
return 0;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 异步加载
其实在列表项中包含图片的场景，图片多为高度固定的缩略图，只需要在计算时根据图给每个列表项加一个固定高度，多于一行的图片直接省略。这样异步加载对于虚拟列表就没有影响了。
如果实在要处理图片不定高的场景，只有在列表中的图片完全加载后再重新更新positions了，利用Image.onload或DOM.resizeObserver在异步加载后回调滚动函数。我试了下应该都是可行的。
<div v-for="item in visibleData" :key="item.id" :id="item.id" ref="items" class="list-item">
{{ item.value }}
<img :src="item.img" @load="updatePositions" />
</div>
mounted() {
let content = this.$refs.content
let resizeObserver = new ResizeObserver(() => this.updatePositions())
resizeObserver.observe(content)
},
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 懒加载数据
一次性请求大量数据可能会使后端处理时间增加，过大的响应体也会导致整体请求响应耗时增加，用户等待时间较长体感较差。
因此我们结合懒加载的方式，在每次滚动触底时加载部分新数据并更新positions，避免单次请求等待时间过长。
// 滚动回调
scrollEvent(target) {
const { scrollTop, scrollHeight, clientHeight } = target;
this.start = this.getStartIndex(scrollTop);
this.end = this.start + this.visibleCount;
this.currentOffset = this.getCurrentOffset()
// 触底
if ((scrollTop + clientHeight) === scrollHeight) {
// 模拟数据请求
let len = this.listData.length + 1
for (let i = len; i <= len + 100; i++) {
this.listData.push({id: i, value: i + '字符内容'.repeat(Math.random() * 20) })
}
this.initPositions(this.listData, this.preItemSize)
}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
有些同学可能会想，懒加载时初始数据量较少，会导致滚动条很短，间接给用户一种数据量很少的错觉。
对于这种情况我们需要跟后端做好协调，接口返回的数据格式大致规定为这样
data: {
page: 1,
size: 1000,
count: 10000,
list: [1...1000],
updateTime: '...',
. . . . . .
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
然后使用data.count初始化positions，在后续懒加载到对应索引的数据时，替换positions里的内容。
# 总结
在最后我们简单总结一下，为了优化虚拟列表我们做了哪些操作。
- 不定高：由于很难在渲染之前拿到元素真实高度，我们采取预估高度初始化后重新渲染的方案来正确渲染不定高内容。并重写了滚动回调函数和部分与
itemSize相关的计算属性。 - 缓冲区：为了解决性能低时数据渲染不及时造成的白屏闪烁，我们创建上下缓冲区额外渲染数据，为可视区的渲染提供更多缓冲时间。为此要重写
start/end和currentOffset的计算方式。 - 异步加载：如果一定要处理列表异步加载不定高元素的场景，我们通过
img.onload和ResizeObserver在加载完成后更新列表。 - 懒加载：一次性大量数据的请求可能会导致请求响应时间变长，我们使用触底加载新数据并更新
positions的方式来分化单次请求的数据量。
点击查看
<template>
<div
:style="{ height: height ? height + 'px' : '100%' }"
class="container"
ref="virtualList"
>
<div class="phantom" :style="{ height: listHeight + 'px' }"></div>
<div
class="content"
:class="[cellClass]"
ref="content"
:style="{ transform: `translate3d(0, ${currentOffset}px, 0)` }"
>
<div
v-for="item in visibleData"
:key="String(item.index)"
:id="String(item.index)"
ref="items"
>
<slot v-bind:data="item"></slot>
</div>
<div class="loadingMore" v-if="loading">
<loadingVue />
</div>
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
import loadingVue from "@/components/control/v-loading/loading.vue";
import lodash from "lodash";
let binarySearch = function (list, target) {
const len = list.length;
let left = 0,
right = len - 1;
let tempIndex = null;
while (left <= right) {
let midIndex = (left + right) >> 1;
let midVal = list[midIndex].bottom;
if (midVal === target) {
return midIndex;
} else if (midVal < target) {
left = midIndex + 1;
} else {
// list不一定存在与target相等的项，不断收缩右区间，寻找最匹配的项
if (tempIndex === null || tempIndex > midIndex) {
tempIndex = midIndex;
}
right--;
}
}
// 如果没有搜索到完全匹配的项 就返回最匹配的项
return tempIndex;
};
let that;
let ticking = false;
export default {
components: {
loadingVue,
},
props: {
cellClass: String,
// 是否开启虚拟滚动
virtual: {
type: Boolean,
default: false,
},
loading: {
type: Boolean,
default: false,
},
height: {
type: Number,
default: 700,
},
list: {
type: Array,
default: () => [],
},
// 预估行高度
preItemSize: {
type: Number,
default: 25,
},
// 缓冲区数量（即每个缓冲区只缓冲 0.5 * 最大可见列表项数 个元素）
bufferPercent: {
type: Number,
default: 0.5,
},
},
data() {
return {
positions: [],
screenHeight: 0,
currentOffset: 0,
start: 0,
end: 0,
count: 0,
};
},
created() {
that = this;
},
mounted() {
this.screenHeight = this.$el.clientHeight;
this.start = 0;
this.end = this.start + this.visibleCount;
// 绑定滚动事件
let target = this.$refs.virtualList;
let scrollFn = (event) => this.scrollEvent(event.target);
target.addEventListener("scroll", scrollFn, { passive: true });
},
watch: {
listData: {
handler: function () {
this.initPositions(this.listData, this.preItemSize);
},
immediate: true,
deep: true,
},
},
updated() {
this.$nextTick(() => {
if (!this.$refs.items || !this.$refs.items.length) {
return;
}
if (this.virtual) {
// 根据真实元素大小，修改对应的缓存列表
this.updatePositions();
// 更新完缓存列表后，重新赋值偏移量
this.currentOffset = this.getCurrentOffset();
}
});
},
computed: {
listHeight() {
return (
this.positions[this.positions.length - 1]?.bottom || this.preItemSize
);
},
visibleCount() {
return Math.ceil(this.screenHeight / this.preItemSize);
},
listData() {
return this.list.map((v, index) => ({ ...v, index }));
},
visibleData() {
return this.listData.slice(
this.start - this.aboveCount,
this.end + this.belowCount
);
},
bufferCount() {
return (this.visibleCount * this.bufferPercent) >> 0; // 向下取整
},
// 使用索引和缓冲数量的最小值 避免缓冲不存在或者过多的数据
aboveCount() {
return Math.min(this.start, this.bufferCount);
},
belowCount() {
return Math.min(this.listData.length - this.end, this.bufferCount);
},
},
methods: {
// 滚动回调
scrollEvent(target) {
if (!ticking) {
requestAnimationFrame(() => {
const { scrollTop, clientHeight, scrollHeight } = target;
if (this.virtual) {
that.start = that.getStartIndex(scrollTop);
that.end = that.start + that.visibleCount;
that.currentOffset = that.getCurrentOffset();
}
if (clientHeight + scrollTop + 1 >= scrollHeight) {
that.loadMore();
}
ticking = false;
});
ticking = true;
}
},
loadMore: lodash.debounce(
() => {
that.$emit("loadMore");
},
500,
{
leading: true,
}
),
// 初始化列表
initPositions(listData, itemSize) {
this.positions = listData.map((item, index) => {
return {
index,
top: index * itemSize,
bottom: (index + 1) * itemSize,
height: itemSize,
};
});
},
// 渲染后更新positions
updatePositions() {
let nodes = this.$refs.items;
nodes.forEach((node) => {
// 获取 真实DOM高度
const { height } = node.getBoundingClientRect();
// 根据 元素索引 获取 缓存列表对应的列表项
const index = Number(node.id);
let oldHeight = this.positions[index].height;
// dValue：真实高度与预估高度的差值 决定该列表项是否要更新
let dValue = oldHeight - height;
// 如果有高度差 !!dValue === true
if (dValue) {
// 更新对应列表项的 bottom 和 height
this.positions[index].bottom = this.positions[index].bottom - dValue;
this.positions[index].height = height;
// 依次更新positions中后续元素的 top bottom
for (let k = index + 1; k < this.positions.length; k++) {
this.positions[k].top = this.positions[k - 1].bottom;
this.positions[k].bottom = this.positions[k].bottom - dValue;
}
}
});
},
getStartIndex(scrollTop = 0) {
return binarySearch(this.positions, scrollTop);
},
getCurrentOffset() {
if (this.start >= 1) {
// 计算偏移量时包括上缓冲区的列表项
let size =
this.positions[this.start].top -
(this.positions[this.start - this.aboveCount]
? this.positions[this.start - this.aboveCount].top
: 0);
return this.positions[this.start - 1].bottom - size;
} else {
return 0;
}
},
},
};
</script>
<style scoped>
.container {
position: relative;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling: touch;
}
.phantom {
position: absolute;
top: 0;
right: 0;
left: 0;
}
.content {
position: absolute;
top: 0;
right: 0;
left: 0;
}
.loadingMore {
height: 50px;
position: absolute;
background-color: #f8f8f8cc;
bottom: 0;
width: 100%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286