前端性能优化-虚拟滚动

为什么使用虚拟滚动

相信在前端业务中不乏需要渲染长列表的场景，当渲染上千或者上万条数据时，DOM操作是很昂贵的，一次渲染大量复杂的DOM节点，会导致页面性能降低。虚拟滚动的解决思路是限制渲染节点的个数，仅渲染当前可视区域内的数据。

在不使用虚拟滚动的情况下，渲染10万个只包含文本的简单节点：

使用虚拟滚动的情况下，渲染10万个节点：

仅仅渲染了少量可见的节点，在滚动过程中不断更新:

可见虚拟滚动在优化大量数据渲染时的优势是巨大的，本文以列表为例讨论不同场景下的虚拟滚动具体实现方案。

列表虚拟滚动实现

我们尝试实现一个VirtualList组件，用于呈现调用者传入的列表数据，虚拟滚动的实现细节封装在内。

长列表的渲染有以下几种情况

  1. 列表项高度固定，且每个列表项高度相等
  2. 列表项高度固定不相等，但组件调用方可以明确的传入形如(index: number)=>number的getter方法去指定每个索引处列表项的高度
  3. 列表项高度不固定，随内容适应，且调用方无法确定具体高度

在具体实现前，先了解一下虚拟滚动计算过程中涉及到的几个重要属性

对于每种情况大致思路其实相似，计算出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. 动态高度

考虑两个问题:

  1. 如何计算总高度totalHeight？
  2. 如何计算当前可见的节点？
计算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事件节流...另外，最后提出两个值得思考的问题:

  1. 浏览器对高度的限制如何避免？具体参考Do the browsers have a maximum height for the body/document
  2. 树形控件如何实现虚拟滚动？

后续文章会继续讨论，欢迎多多指教～

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342