虚拟列表（附带动态加载）原理及实现

前言

在前端的业务中，存在以下几种情况需要用到虚拟列表，旨在解决数据量庞大时浏览器渲染性能瓶颈。比如：

• 1、导出报表数据不分页，数据量庞大
• 2、移动端使用下拉加载分页列表，一直加载下一页时，数据量越来越大，无数的真实dom生成，对浏览器的渲染造成过大压力
• 3、前端业务中许多树形数据处理，一般全部给到前端，如果一次性渲染出来，便会造成浏览器卡顿，如果把树数据结构看做一维的list来处理，结合虚拟列表就能解决性能瓶颈

以上便是我在工作中常见的场景，还有很多情况，就不一一列举了。

原理

虚拟列表也是可视化加载的一种，即只渲染可视容器中的内容。

假设有1万条记录需要同时渲染，我们屏幕的可见区域的高度为500px,而列表项的高度为50px，则此时我们在屏幕中最多只能看到10个列表项，那么在首次渲染的时候，我们只需加载10条即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-psMg5uP4-1658805024111)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a51304d6b6c42e785c5e3ae3f21d99b~tplv-k3u1fbpfcp-watermark.image?)]

实现

虚拟列表的实现，实际上就是在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，动态通过计算获得可视区域内的列表项，并将非可视区域内存在的列表项删除。

• 计算当前可视区域起始数据索引(startIndex)
• 计算当前可视区域结束数据索引(endIndex)
• 计算当前可视区域的数据，并渲染到页面中
• 计算startIndex对应的数据在整个列表中的偏移位置startOffset并设置到列表上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nUhn7xMB-1658805024112)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fca76f0393d468bbd530dbbecdf6b9f~tplv-k3u1fbpfcp-watermark.image?)]

<div class="virtual-list-container">
    <div class="virtual-list-place">div>
    <div class="virtual-list">
      
      
      
      
    div>
div>
1
2
3
4
5
6
7
8
9

• virtual-list-container 为可视区域的容器
• virtual-list-place 为容器内的占位，高度为总列表高度，用于形成滚动条
• virtual-list 为列表项的渲染区域

接着，监听virtual-list-container的scroll事件，获取滚动位置scrollTop

• 假定可视区域高度固定，称之为screenHeight
• 假定列表每项高度固定，称之为itemSize
• 假定列表数据称之为listData
• 假定当前滚动位置称之为scrollTop

则可推算出：

• 列表总高度listHeight = listData.length * itemSize
• 可显示的列表项数visibleCount = Math.ceil(screenHeight / itemSize)
• 数据的起始索引startIndex = Math.floor(scrollTop / itemSize)
• 数据的结束索引endIndex = startIndex + visibleCount
• 列表显示数据为visibleData = listData.slice(startIndex,endIndex)

当滚动后，由于渲染区域相对于可视区域已经发生了偏移，此时我需要获取一个偏移量startOffset，通过样式控制将渲染区域偏移至可视区域中。

• 偏移量startOffset = scrollTop - (scrollTop % itemSize);

列表项高度不固定

在之前的实现中，列表项的高度是固定的，因为高度固定，所以可以很轻易的获取列表项的整体高度以及滚动时的显示数据与对应的偏移量。而实际应用的时候，当列表中包含文本之类的可变内容，会导致列表项的高度并不相同。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rZH5QFIz-1658805024112)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e96e61b783d046e8a5d758088e275be1~tplv-k3u1fbpfcp-watermark.image?)]

在虚拟列表中应用动态高度的解决方案一般有如下三种：

1.对组件属性itemSize进行扩展，支持传递类型为数字、数组、函数

• 可以是一个固定值，如 100，此时列表项是固高的
• 可以是一个包含所有列表项高度的数据，如 [50, 20, 100, 80, …]
• 可以是一个根据列表项索引返回其高度的函数：(index: number): number

这种方式虽然有比较好的灵活度，但仅适用于可以预先知道或可以通过计算得知列表项高度的情况，依然无法解决列表项高度由内容撑开的情况。

2.将列表项渲染到屏幕外，对其高度进行测量并缓存，然后再将其渲染至可视区域内。

由于预先渲染至屏幕外，再渲染至屏幕内，这导致渲染成本增加一倍，这对于数百万用户在低端移动设备上使用的产品来说是不切实际的。

3.以预估高度先行渲染，然后获取真实高度并缓存。

这是我选择的实现方式，可以避免前两种方案的不足。

接下来，来看如何简易的实现：

定义组件属性itemHeight,用于接收预估高度

props: { 
    //预估高度 
    itemHeight:{ 
        type:Number 
    } 
}
1
2
3
4
5
6

定义positions，用于列表项渲染后存储每一项的高度以及位置信息，

this.positions = [
  // {
  //   top:0,
  //   bottom:100,
  //   height:100
  // }
];
1
2
3
4
5
6
7

由于需要在渲染完成后，获取列表每项的位置信息并缓存，所以使用钩子函数updated来实现：

updated(){
  let nodes = this.$refs.items;
  nodes.forEach((node)=>{
    let rect = node.getBoundingClientRect();
    let height = rect.height;
    let index = +node.id.slice(1)
    let oldHeight = this.positions[index].height;
    let dValue = oldHeight - height;
    //存在差值
    if(dValue){
      this.positions[index].bottom = this.positions[index].bottom - dValue;
      this.positions[index].height = height;
      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

vue版本的代码实现

组件VirtualList：

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

固定列表项高度使用组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

动态列表项高度使用组件

开启itemAutoHeight，并且设置bufferScale比例来增加上下缓冲区大小保证加载的内容能撑满可视区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

与分页结合时使用

在onReachBottom中做接口请求，这样的话既能通过分页优化，又能在加载的数据量大的时候采用虚拟列表方案

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

稳定npm推荐

• react相关npm包

// 虚拟列表
npm i -S react-window
// 虚拟表格
npm i -S virtuallist-antd
1
2
3
4

• react相关npm包

// 虚拟列表
npm i -S vue-virtual-scroll-list
// 虚拟表格
npm i -S vxe-table
1
2
3
4