为什么使用虚拟滚动
相信在前端业务中不乏需要渲染长列表的场景，当渲染上千或者上万条数据时，DOM操作是很昂贵的，一次渲染大量复杂的DOM节点，会导致页面性能降低。虚拟滚动的解决思路是限制渲染节点的个数，仅渲染当前可视区域内的数据。
在不使用虚拟滚动的情况下，渲染10万个只包含文本的简单节点：
使用虚拟滚动的情况下，渲染10万个节点：
仅仅渲染了少量可见的节点，在滚动过程中不断更新:
可见虚拟滚动在优化大量数据渲染时的优势是巨大的，本文以列表为例讨论不同场景下的虚拟滚动具体实现方案。
列表虚拟滚动实现
我们尝试实现一个VirtualList组件，用于呈现调用者传入的列表数据，虚拟滚动的实现细节封装在内。
长列表的渲染有以下几种情况
- 列表项高度固定，且每个列表项高度相等
- 列表项高度固定不相等，但组件调用方可以明确的传入形如
(index: number)=>number的getter方法去指定每个索引处列表项的高度 - 列表项高度不固定，随内容适应，且调用方无法确定具体高度
在具体实现前，先了解一下虚拟滚动计算过程中涉及到的几个重要属性
对于每种情况大致思路其实相似，计算出totalHeight撑起容器，并在滚动事件触发时根据scrollTop值不断更新startIndex以及endIndex，以此从列表数据listData中截取元素。
1 列表项高度相等
由于列表项高度itemHeight已固定，因此在不考虑buffer的情况下，totalHeight = itemHeight * size，startIndex = scrollTop / itemHeight，endIndex = startIndex + containerHeight / itemHeight。
具体代码如下:
// list.js
type Props = {
itemHeight: number;
listData: any[];
height: number;
bufferNumber?: number;
}
type States = {
scrollTop: number;
}
export default class VirtualList extends React.Component<Props, States> {
constructor(props: Props) {
super(props);
this.state = {
scrollTop: 0
}
this.onScroll = this.onScroll.bind(this);
}
private container = React.createRef<HTMLDivElement>();
private onScroll() {
this.setState({scrollTop: this.container.current?.scrollTop || 0});
}
private calcListToDisplay(params: {
scrollTop: number,
listData: any[],
itemHeight: number,
bufferNumber: number,
containerHeight: number,
}) {
const {scrollTop, listData, itemHeight, bufferNumber, containerHeight} = params;
// 考虑到buffer
let startIndex = Math.floor(scrollTop / itemHeight);
startIndex = Math.max(0, startIndex - bufferNumber);
const displayCount = Math.ceil(containerHeight / itemHeight);
let lastIndex = startIndex + displayCount;
lastIndex = Math.min(listData.length, lastIndex + bufferNumber);
return {
data: listData.slice(startIndex, lastIndex + 1),
offset: startIndex * itemHeight
}
}
render() {
const {itemHeight, listData, height: containerHeight, bufferNumber = 10} = this.props;
const {scrollTop} = this.state;
const totalHeight = itemHeight * listData.length;
const { data: listToDisplay, offset } =
this.calcListToDisplay({scrollTop, listData, itemHeight, bufferNumber, containerHeight});
return (
<div ref={this.container} onScroll={this.onScroll} style={{height: `${containerHeight}px`, overflow: 'auto'}}>
<div className="virtual-list-wrapper" style={{height: `${totalHeight}px`}}>
<div style={{transform: `translateY(${offset}px)`}}>
{
listToDisplay.map((item, index) => {
return (
<ListItem key={item.key ? item.key: index}>
<img src={item.img}/>
<div>{item.text}</div>
</ListItem>
)
})
}
</div>
</div>
</div>
)
}
}
// item.js
type Props = {
children: any;
}
export default (props: Props) => {
const { children } = props;
return (
<div className="list-item">
{children}
</div>
)
}
注意到calcListToDisplay方法中偏移量的计算，由于.virtual-list-wrapper容器高度已经撑大，计算出的可见节点会渲染在容器顶部，需要让他偏移到可视区域的正确位置。这里有几种不同的方案，使用translate调整位置，使用绝对定位调整位置或者利用padding填充。采用translate是因为transform可以利用GPU加速，避免频繁的重绘，达到较优的性能。
组件调用如下:
<VirtualList height={300} itemHeight={38} listData={generateList()} />
2. 指定列表项高度Getter方法
由于传入了Getter方法，相当于已知每个列表项的高度。我们可以维护一个数组posInfo来存储每个节点到容器顶部的距离，posInfo[i]即为第i项距离顶部的偏移量，如图:
那么不考虑bufferNumber，只需要找出满足posInfo[k] < scrollTop，且posInfo[k+1] > scrollTop的k即可，由于posInfo一定是递增序列，可以采用二分法查找提高效率。
具体代码如下:
// list.js
type Props = {
heightGetter: heightGetter;
listData: any[];
height: number;
bufferNumber?: number;
}
type States = {
scrollTop: number;
}
export default class VirtualList extends React.Component<Props, States> {
constructor(props: Props) {
super(props);
this.state = {
scrollTop: 0
}
this.onScroll = this.onScroll.bind(this);
}
private container = React.createRef<HTMLDivElement>();
private totalHeight: number = 0;
private posInfo: number[] = [];
componentWillMount() {
const { listData, heightGetter } = this.props;
if (heightGetter instanceof Function) {
this.initItemPosition(listData, heightGetter);
}
}
private initItemPosition(listData: any[], heightGetter: heightGetter) {
this.totalHeight = listData.reduce((total: number, item: any, index: number) => {
const height = heightGetter(index);
this.posInfo.push(total);
return total + height;
}, 0);
}
private getListToDisplay(params: {
scrollTop: number;
listData: any[];
posInfo: number[];
containerHeight: number;
bufferNumber: number;
}) {
const { scrollTop, listData, posInfo, containerHeight, bufferNumber } = params;
let startIndex = this.searchPos(posInfo, scrollTop);
let lastIndex = listData.length - 1;
const lastIndexDistance = containerHeight + scrollTop;
for (let index = startIndex; index < listData.length; index++) {
if (posInfo[index] >= lastIndexDistance) {
lastIndex = index;
break;
}
}
// 考虑buffer
startIndex = Math.max(0, startIndex - bufferNumber);
lastIndex = Math.min(listData.length - 1, lastIndex + bufferNumber);
return {
data: listData.slice(startIndex, lastIndex + 1),
offset: posInfo[startIndex]
}
}
private searchPos(posInfo: number[], scrollTop: number) {
const _binarySearchPos = (start: number, end: number): number => {
if (end - start <= 1) {
return start;
}
const mid = Math.ceil((start + end) / 2);
if (posInfo[mid] === scrollTop) {
return mid;
} else if (posInfo[mid] < scrollTop) {
if (posInfo[mid + 1] && posInfo[mid + 1] >= scrollTop) {
return mid;
} else {
return _binarySearchPos(mid + 1, end);
}
} else {
if (posInfo[mid - 1] && posInfo[mid - 1] <= scrollTop) {
return mid - 1;
} else {
return _binarySearchPos(start, mid - 1);
}
}
}
return _binarySearchPos(0, posInfo.length - 1);
}
private onScroll() {
this.setState({ scrollTop: this.container.current?.scrollTop || 0 });
}
render() {
const { height: containerHeight, listData, bufferNumber = 10 } = this.props;
const { scrollTop } = this.state;
const { data: _listToDisplay, offset } = this.getListToDisplay({ scrollTop, listData, posInfo: this.posInfo, containerHeight, bufferNumber });
return (
<div ref={this.container} onScroll={this.onScroll} style={{ height: `${containerHeight}px`, overflow: 'auto' }}>
<div className="virtual-list-wrapper" style={{ height: `${this.totalHeight}px` }}>
<div style={{ transform: `translateY(${offset}px)`, willChange: 'transform' }}>
{
_listToDisplay.map((item, index) => {
return (
<ListItem key={item.key ? item.key : index} height={item.height}>
<img src={item.img} />
<div>{item.text}</div>
</ListItem>
)
})
}
</div>
</div>
</div>
)
}
}
// item.js
type Props = {
height: number;
children: any;
}
export default (props: Props) => {
const {children, height} = props;
return (
<div className="list-item" style={{height}}>
{children}
</div>
)
}
组件调用如下:
const generateList = () => {
const listData = [];
for (let i = 0; i < 100000; i++) {
listData.push({
key: i,
img: Img,
height: Math.random() * 30 + 30,
text: i
})
}
return listData;
}
const listData = generateList();
<VirtualList height={300} heightGetter={(index) => { return listData[index].height }} listData={listData} />
3. 动态高度
考虑两个问题:
- 如何计算总高度totalHeight？
- 如何计算当前可见的节点？
计算totalHeight
由于无法得知节点具体高度，可以通过给出一个模糊高度fuzzyItemHeight来初始化一个并不准确的高度撑起容器。接着在滚动过程中，item组件挂载后可以得到准确的高度，此时更新totalHeight，使totalHeight趋于准确。
维护heightCache数组存储已挂载过的列表项的高度，lastCalcIndex记录最后一个已挂载节点的索引，lastCalcTotalHeight记录已挂载节点的全部高度和，在item组件mount生命周期内更新totalHeight。具体代码如下:
onMount(index: number, height: number) {
// 避免已挂载过的组件重复挂载导致大量多余的计算
if (index > this.lastCalcIndex) {
this.heightCache[index] = height;
this.lastCalcIndex = index;
this.lastCalcTotalHeight += height;
this.totalHeight = this.lastCalcTotalHeight + (this.props.listData.length - 1 - this.lastCalcIndex) * (this.props.fuzzyItemHeight || 30);
}
}
计算可见节点
遍历已缓存的节点高度，calcHeight记录已遍历的节点总高度，直到calcHeight > scrollTop，记录当前节点索引为startIndex，同理找出calcHeight > scrollTop + containerHeight的节点索引为endIndex。与此同时，posInfo记录各节点到顶部的距离，以便直接给出偏移量offset = posInfo[startIndex]。具体代码如下:
private getListToDisplay(params: {
scrollTop: number;
containerHeight: number;
itemHeights: number[];
bufferNumber: number;
listData: any[];
}) {
const { scrollTop, containerHeight, itemHeights, bufferNumber, listData } = params;
let calcHeight = itemHeights[0];
let startIndex = 0;
let lastIndex = 0;
const posInfo = [];
posInfo.push(0);
for (let index = 1; index < itemHeights.length; index++) {
if (calcHeight > scrollTop) {
startIndex = index - 1;
break;
}
posInfo.push(calcHeight);
calcHeight += itemHeights[index];
}
for (let index = startIndex; index < itemHeights.length; index++) {
if (calcHeight > scrollTop + containerHeight) {
lastIndex = index;
break;
}
calcHeight += itemHeights[index];
}
startIndex = Math.max(0, startIndex - bufferNumber);
lastIndex = Math.min(itemHeights.length - 1, lastIndex + bufferNumber);
return {
data: listData.slice(startIndex, lastIndex + 1),
offset: posInfo[startIndex]
}
}
解决了这两个问题，动态高度的虚拟滚动列表也可以work了，全部代码如下:
// list.js
type Props = {
fuzzyItemHeight?: number;
listData: any[];
height: number;
bufferNumber?: number;
}
type States = {
scrollTop: number;
}
export default class VirtualList extends React.Component<Props, States> {
constructor(props: Props) {
super(props);
this.state = {
scrollTop: 0
}
this.onScroll = this.onScroll.bind(this);
}
private container = React.createRef<HTMLDivElement>();
private heightCache: number[] = [];
private lastCalcIndex = -1;
private lastCalcTotalHeight = 0;
private totalHeight = 0;
componentWillMount() {
this.heightCache = new Array(this.props.listData.length).fill(this.props.fuzzyItemHeight || 30);
}
onMount(index: number, height: number) {
if (index > this.lastCalcIndex) {
this.heightCache[index] = height;
this.lastCalcIndex = index;
this.lastCalcTotalHeight += height;
this.totalHeight = this.lastCalcTotalHeight + (this.props.listData.length - 1 - this.lastCalcIndex) * (this.props.fuzzyItemHeight || 30);
}
}
private onScroll() {
this.setState({ scrollTop: this.container.current?.scrollTop || 0 });
}
private getListToDisplay(params: {
scrollTop: number;
containerHeight: number;
itemHeights: number[];
bufferNumber: number;
listData: any[];
}) {
const { scrollTop, containerHeight, itemHeights, bufferNumber, listData } = params;
let calcHeight = itemHeights[0];
let startIndex = 0;
let lastIndex = 0;
const posInfo = [];
posInfo.push(0);
for (let index = 1; index < itemHeights.length; index++) {
if (calcHeight > scrollTop) {
startIndex = index - 1;
break;
}
posInfo.push(calcHeight);
calcHeight += itemHeights[index];
}
for (let index = startIndex; index < itemHeights.length; index++) {
if (calcHeight > scrollTop + containerHeight) {
lastIndex = index;
break;
}
calcHeight += itemHeights[index];
}
startIndex = Math.max(0, startIndex - bufferNumber);
lastIndex = Math.min(itemHeights.length - 1, lastIndex + bufferNumber);
return {
data: listData.slice(startIndex, lastIndex + 1),
offset: posInfo[startIndex]
}
}
render() {
const { height: containerHeight, listData, bufferNumber = 10 } = this.props;
const { scrollTop } = this.state;
const { data: _listToDisplay, offset } = this.getListToDisplay({ scrollTop, listData, itemHeights: this.heightCache, containerHeight, bufferNumber });
return (
<div ref={this.container} onScroll={this.onScroll} style={{ height: `${containerHeight}px`, overflow: 'auto' }}>
<div className="virtual-list-wrapper" style={{ height: `${this.totalHeight}px` }}>
<div style={{ transform: `translateY(${offset}px)`, willChange: 'transform' }}>
{
_listToDisplay.map((item, index) => {
return (
<ListItem key={item.key ? item.key : index} onMount={this.onMount.bind(this, listData.indexOf(item))}>
{/* <img src={item.img} /> */}
<div>{item.text}</div>
</ListItem>
)
})
}
</div>
</div>
</div>
)
}
}
// item.js
type Props = {
onMount: (height: number) => void;
}
type States = {
}
export default class ListItem extends React.Component<Props, States> {
componentDidMount() {
this.props.onMount((this.refs.item as Element).clientHeight);
}
render() {
const { children } = this.props;
return (
<div ref="item" className="list-item">
{children}
</div>
)
}
}
组件调用如下:
<VirtualList height={300} fuzzyItemHeight={30} listData={listData} />
总结
上面三种情况下的虚拟滚动实现基本上已经能够满足简单的业务场景。需要进一步考虑的是效率上的提升，例如改进可见节点和总高度的计算复杂度，或对scroll事件节流...另外，最后提出两个值得思考的问题:
- 浏览器对高度的限制如何避免？具体参考Do the browsers have a maximum height for the body/document
- 树形控件如何实现虚拟滚动？
后续文章会继续讨论，欢迎多多指教～
网友评论