虚拟列表的使用场景
如果我想要在网页中放大量的列表项，纯渲染的话，对于浏览器性能将会是个极大的挑战，会造成滚动卡顿，整体体验非常不好，主要有以下问题：
- 页面等待时间极长，用户体验差
- CPU 计算能力不够，滑动会卡顿
- GPU 渲染能力不够，页面会跳屏
- RAM 内存容量不够，浏览器崩溃
传统做法
对于长列表渲染，传统的方法是使用懒加载的方式，下拉到底部获取新的内容加载进来，其实就相当于是在垂直方向上的分页叠加功能，但随着加载数据越来越多，浏览器的回流和重绘的开销将会越来越大，整个滑动也会造成卡顿，这个时候我们就可以考虑使用虚拟列表来解决问题。
虚拟列表
其核心思想就是在处理用户滚动时，只改变列表在可视区域的渲染部分，具体步骤为：
先计算可见区域起始数据的索引值startIndex和当前可见区域结束数据的索引值endIndex，假如元素的高度是固定的，那么startIndex的算法很简单，即startIndex = Math.floor(scrollTop/itemHeight)，endIndex = startIndex + (clientHeight/itemHeight) - 1，再根据startIndex和endIndex取相应范围的数据，渲染到可视区域，然后再计算startOffset（上滚动空白区域）和endOffset（下滚动空白区域），这两个偏移量的作用就是来撑开容器元素的内容，从而起到缓冲的作用，使得滚动条保持平滑滚动，并使滚动条处于一个正确的位置
上述的操作可以总结成五步：
- 不把长列表数据一次性全部直接渲染在页面上
- 截取长列表一部分数据用来填充可视区域
- 长列表数据不可视部分使用空白占位填充（下图中的startOffset和endOffset区域）
- 监听滚动事件根据滚动位置动态改变可视列表
- 监听滚动事件根据滚动位置动态改变空白填充
定高虚拟列表实现步骤
掘金使用的是传统懒加载的方式加载的哈，用的并不是虚拟列表，这里只是想表达一下什么是定高的列表！
实现的效果应该是：不论怎么滚动，我们改变的只是滚动条的高度和可视区的元素内容，并没有增加任何多余的元素，下面来看看要怎么实现吧！
1
2
3
4
5
6
7
8
9
10
11
12
| // 虚拟列表DOM结构
<div className='container'>
// 监听滚动事件的盒子，该高度继承了父元素的高度
<div className='scroll-box' ref={containerRef} onScroll={boxScroll}>
// 该盒子的高度一定会超过父元素，要不实现不了滚动的效果，而且还要动态的改变它的padding值用于控制滚动条的状态
<div style={topBlankFill.current}>
{
showList.map(item => <div className='item' key={item.commentId || (Math.random() + item.comments)}>{item.content}</div>)
}
</div>
</div>
</div>
|
计算容器最大容积数量
简单来说，就是我们必须要知道在可视区域内最多能够容纳多少个列表项，这是我们在截取内容数据渲染到页面之前关键的步骤之一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const changeHeight = useCallback(throttle(() => {
curContainerHeight.current = containerRef.current.offsetHeight
curViewNum.current = Math.ceil(curContainerHeight.current / itemHeight) + 1
}, 500), [])
useEffect(() => {
changeHeight()
window.addEventListener('resize', changeHeight)
return () => {
window.removeEventListener('resize', changeHeight)
}
}, [changeHeight])
|
监听滚动事件动态截取数据&&设置上下滚动缓冲消除快速滚动白屏
这是虚拟列表的核心之处，不将所有我们请求到的元素渲染出来，而是只渲染我们能够看到的元素，大大减少了容器内的dom节点数量。
不过有个隐藏的问题我们需要考虑到，当用户滑动过快的时候，很多用户的设备性能并不是很好，很容易出现屏幕已经滚动过去了，但是列表项还没有及时加载出来的情况，这个时候用户就会看到短暂的白屏，对用户的体验非常不好。所以我们需要设置一段缓冲区域，让用户过快的滚动之后还能看到我们提前渲染好的数据，等到缓冲数据滚动完了，我们新的数据也渲染到页面中去了！
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
| const scrollHandle = () => {
let startIndex = Math.floor(containerRef.current.scrollTop / itemHeight)
if (!isNeedLoad && lastStartIndex.current === startIndex) return
isNeedLoad.current = false
lastStartIndex.current = startIndex
const containerMaxSize = curViewNum.current
let endIndex = startIndex + 2 * containerMaxSize - 1
const currLen = dataListRef.current.length
if (endIndex > currLen - 1) {
!isRequestRef.current && setOptions(state => ({ offset: state.offset + 1 }))
endIndex = currLen - 1
}
if (startIndex <= containerMaxSize) {
startIndex = 0
} else {
startIndex = startIndex - containerMaxSize
}
setShowList(dataListRef.current.slice(startIndex, endIndex + 1))
}
|
动态设置上下空白占位
这是虚拟列表的灵魂所在，本质上我们数据量是很少的，一般来说只有几条到十几条数据，如果不对列表做一些附加的操作，连生成滚动条都有点困难，更别说让用户自由操控滚动条滚动了。
我们必须要用某种方法将内容区域撑起来，这样才会出现比较合适的滚动条。我这里采取的方法就是设置paddingTop和paddingBottom的值来动态的撑开内容区域。
为什么要动态的改变呢？举个例子，我们向下滑动的时候会更换页面中要展示的数据列表，如果不改变原先的空白填充区域，那么随着滚动条的滚动，原先展示在可视区的第一条数据就会向上移动，虽然我们更新的数据是正确的，但并没有将它们展示在合适的位置。完美的方案是是不仅要展示正确的数据，而且还要改变空白填充区域高度，使得数据能够正确的展示在浏览器视口当中。
1
2
3
4
5
6
7
8
|
topBlankFill.current = {
paddingTop: `${startIndex * itemHeight}px`,
paddingBottom: `${(dataListRef.current.length - 1 - endIndex) * itemHeight}px`
}
|
下拉置底自动请求和加载数据
在真实的开发场景中，我们不会一次性请求1w、10w条数据过来，这样请求时间那么长，用户早就把页面关掉了，还优化个屁啊哈哈！
所以真实开发中，我们还是要结合原来的懒加载方式，等到下拉触底的时候去加载新的数据进来，放置到缓存数据当中，然后我们再根据滚动事件决定具体渲染哪一部分的数据到页面上去。
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
|
useEffect(() => {
(async () => {
try {
isRequestRef.current = true
const { offset } = options
let limit = 20
if (offset === 1) limit = 40
const { data: { comments, more } } = await axios({
url: `http://localhost:3000/comment/music?id=${186015 - offset}&limit=${limit}&offset=1`
})
isNeedLoad.current = more
dataListRef.current = [...dataListRef.current, ...comments]
isRequestRef.current = false
boxScroll()
} catch (err) {
isRequestRef.current = false
console.log(err);
}
})()
}, [options])
|
滚动事件请求动画帧进行节流优化
虚拟列表很依赖于滚动事件，考虑到用户可能会滑动很快，我们在用节流优化的时候事件必须要设置的够短，否则还是会出现白屏现象。
这里我没有用传统的节流函数，而是用到了请求动画帧帮助我们进行节流，这里就不做具体介绍了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
let then = useRef(0)
const boxScroll = () => {
const now = Date.now()
if (now - then.current > 30) {
then.current = now
window.requestAnimationFrame(scrollHandle)
}
}
|
当然，填充空白区域、模拟滚动条还有其它的办法，比如根据总数据量让一个盒子撑开父盒子用于生成滚动条，根据startIndex计算出可视区域距离顶部的距离并调节内容区域元素的transform属性，即startOffset = scrollTop \- (scrollTop % this.itemSize)，让内容区域一直暴露在可视区域内
目前为止，我们已经实现了固定高度的列表项用虚拟列表来展示的功能！接下里我们将会介绍关于不定高（其高度由内容进行撑开）的列表项如何用虚拟列表进行优化
不定高虚拟列表实现步骤
微博是一个很典型的不定高虚拟列表，大家感兴趣的话可以去看一下哦！
在之前的实现中，列表项的高度是固定的，因为高度固定，所以可以很轻易的就能获取列表项的整体高度以及滚动时的显示数据与对应的偏移量。而实际应用的时候，当列表中包含文本、图片之类的可变内容，会导致列表项的高度并不相同。
我们在列表渲染之前，确实没有办法知道每一项的高度，但是又必须要渲染出来，那怎么办呢？
这里有一个解决方法，就是先给没有渲染出来的列表项设置一个预估高度，等到这些数据渲染成真实dom元素了之后，再获取到他们的真实高度去更新原来设置的预估高度，下面我们来看看跟定高列表有什么不同，具体要怎么实现吧！
请求到新数据对数据进行初始化（设置预估高度）
预估高度的设置其实是有技巧的，列表项预估高度设置的越大，展现出来的数据就会越少，所以当预估高度比实际高度大很多的时候，很容易出现可视区域数据量太少而引起的可视区域出现部分空白。为了避免这种情况，我们的预估高度应该设置为列表项产生的最小值，这样尽管可能会多渲染出几条数据，但能保证首次呈现给用户的画面中没有空白
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
|
useEffect(() => {
(async () => {
if (!isRequestRef.current) {
console.log('发送请求了');
try {
isRequestRef.current = true
const { offset } = options
let limit = 20
if (offset === 1) limit = 40
const { data: { comments, more } } = await axios({
url: `http://localhost:3000/comment/music?id=${186015 - offset}&limit=${limit}&offset=1`
})
isNeedLoad.current = more
const lastIndex = dataListRef.current.length ? dataListRef.current[dataListRef.current.length - 1].index : -1
dataListRef.current = [...dataListRef.current, ...comments]
const dataList = dataListRef.current
for (let i = lastIndex + 1, len = dataListRef.current.length; i < len; i++) {
dataList[i].index = i
dataList[i].height = 63
dataList[i].top = dataList[i - 1]?.bottom || 0
dataList[i].bottom = dataList[i].top + dataList[i].height
}
isRequestRef.current = false
boxScroll()
} catch (err) {
console.log(err);
} finally {
isRequestRef.current = false
}
}
})()
}, [options])
|
每次列表更新之后将列表项真实高度更新缓存中的预估高度
在React函数式组件中，useEffect只要不传第二个参数，就可以实现类组件componentDidUpdate生命周期函数的作用，只要我们重新渲染一次列表组件，就会重新计算一下当前列表每一项中的真实高度并更新到缓存中去，当下次我们再用到缓存中的这些数据时，使用的就是真实高度了
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
|
useEffect(() => {
const doms = containerRef.current.children[0].children
const len = doms.length
if (len) {
for (let i = 0; i < len; i++) {
const realHeight = doms[i].offsetHeight
const originHeight = showList[i].height
const dValue = realHeight - originHeight
if (dValue) {
const index = showList[i].index
const allData = dataListRef.current
allData[index].bottom += dValue
allData[index].height = realHeight
for (let j = index + 1, len = allData.length; j < len; j++) {
allData[j].top = allData[j - 1].bottom
allData[j].bottom += dValue
}
}
}
}
})
|
得到可视区域的起始和结束元素索引&&设置上下滚动缓冲区域消除快速滚动白屏
列表项的bottom属性代表的就是该元素尾部到容器顶部的距离，不难发现，可视区的第一个元素的bottom是第一个大于滚动高度的；可视区最后一个元素的bottom是第一个大于（滚动高度+可视高度）的。我们可以利用这条规则遍历缓存数组找到对应的startIndex和endIndex
由于我们的缓存数据，本身就是有顺序的，所以获取开始索引的方法可以考虑通过二分查找的方式来降低检索次数，减少时间复杂度。
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
|
const getIndex = () => {
const aboveCount = 5
const belowCount = 5
const resObj = {
startIndex: 0,
endIndex: 0,
}
const scrollTop = containerRef.current.scrollTop
const dataList = dataListRef.current
const len = dataList.length
const startIndex = binarySearch(scrollTop)
if (startIndex <= aboveCount) {
resObj.startIndex = 0
} else {
resObj.startIndex = startIndex - aboveCount
}
const endIndex = binarySearch(scrollTop + curContainerHeight.current) || len - 1
resObj.endIndex = endIndex + belowCount
return resObj
}
const binarySearch = (value) => {
const list = dataListRef.current
let start = 0;
let end = list.length - 1;
let tempIndex = null;
while (start <= end) {
let midIndex = parseInt((start + end) / 2);
let midValue = list[midIndex].bottom;
if (midValue === value) {
return midIndex + 1;
} else if (midValue < value) {
start = midIndex + 1;
} else if (midValue > value) {
if (tempIndex === null || tempIndex > midIndex) {
tempIndex = midIndex;
}
end--
}
}
return tempIndex;
}
|
监听滚动事件动态截取数据&&动态设置上下空白占位
动态截取数据的操作和定高的虚拟列表几乎一样，区别比较大的地方就在padding值的计算方式上。在定高的列表中，我们可以根据起始索引值和结尾索引值直接计算出空白填充区域的高度。
其实在不定高的列表中，计算方式更加简单，因为startIndex对应元素的top值就是我们需要填充的上空白区域，下空白区域也可以根据整个列表的高度（最后一个元素的bottom值）和endIndex对应元素的bottom值之差得出
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
| const scrollHandle = () => {
let { startIndex, endIndex } = getIndex()
if (!isNeedLoad && lastStartIndex.current === startIndex) return
isNeedLoad.current = false
lastStartIndex.current = startIndex
const currLen = dataListRef.current.length
if (endIndex >= currLen - 1) {
!isRequestRef.current && setOptions(state => ({ offset: state.offset + 1 }))
endIndex = currLen - 1
}
topBlankFill.current = {
paddingTop: `${dataListRef.current[startIndex].top}px`,
paddingBottom: `${dataListRef.current[dataListRef.current.length - 1].bottom - dataListRef.current[endIndex].bottom}px`
}
setShowList(dataListRef.current.slice(startIndex, endIndex + 1))
}
|
问题思考
我们虽然实现了根据列表项动态高度下的虚拟列表，但如果列表项中包含图片，并且列表高度由图片撑开。在这种场景下，由于图片会发送网络请求，列表项可能已经渲染到页面中了，但是图片还没有加载出来，此时无法保证我们在获取列表项真实高度时图片是否已经加载完成，获取到的高度有无包含图片高度，从而造成计算不准确的情况。
但是这种任意由图片来撑开盒子大小的场景很少见，因为这样会显得整个列表很不规则。大多数展示图片的列表场景，其实都是提前确定要展示图片的尺寸的，比如微博，1张图片的尺寸是多少，2x2，3x3的尺寸是多少都是提前设计好的，只要我们给img标签加了固定高度，这样就算图片还没有加载出来，但是我们也能够准确的知道列表项的高度是多少。
如果你真的遇到了这种列表项会由图片任意撑开的场景，可以给图片绑定onload事件，等到它加载完之后再重新计算一下列表的高度，然后把它更新到缓存数据中，这是一种方法。其次，还可以使用ResizeObserver来监听列表项内容区域的高度改变，从而实时获取每一列表项的高度，只不过MDN有说道这只是在实验中的一个功能，所以暂时可能没有办法兼容所有的浏览器！
如果大家有其它更好的方法，可以在评论区交流哦！
wechat
alipay
