react-virtualized: FlexTable component becomes very slow with +10 columns

I have been working the past two days to replace our current grid implementation using https://github.com/developerdizzle/react-virtual-list with FlexTable provided by react-virtualized.

Here is a striped-down version:

<div style={{ flex: '1 1 auto' }} className={cn}>
    <AutoSizer>
        {({height, width}) => {
            return <FlexTable
                headerHeight={itemHeight}
                height={height}
                rowCount={data.length}
                rowGetter={({index}) => { return data[index]; }}
                rowHeight={itemHeight}
                width={width}
            >
                <FlexColumn
                    dataKey='bucketSize'
                    flexGrow={1}
                    label='bucketSize'
                    width={100}
                />
                <FlexColumn
                    dataKey='sym'
                    flexGrow={1}
                    label='sym'
                    width={100}
                />
                <FlexColumn
                    dataKey='time'
                    flexGrow={1}
                    label='time'
                    width={100}
                />
                <FlexColumn
                    dataKey='ask'
                    flexGrow={1}
                    label='ask'
                    width={100}
                />
                <FlexColumn
                    dataKey='asize'
                    flexGrow={1}
                    label='asize'
                    width={100}
                />
                <FlexColumn
                    dataKey='bid'
                    flexGrow={1}
                    label='bid'
                    width={100}
                />
                <FlexColumn
                    dataKey='bsize'
                    flexGrow={1}
                    label='bsize'
                    width={100}
                />
            </FlexTable>
        }}
    </AutoSizer>
</div>

Nothing out of ordinary.

However, when you scroll the table, there is a considerable lag/ jitter. Upon further inspection, Grid component is spending loads of time for each scroll event.

15-06-2016 15-27-30

It looks like with addition of every column table scroll performance drops in half. With 22 columns, the table scroll becomes virtually unusable.

In comparison, our simple react-virtual-list implementation scales to hundreds of columns without any noticeable performance impact.

I have attached a CPU profile log.

CPU-20160615T154350.zip

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 40 (26 by maintainers)

Most upvoted comments

Good news! I’ve been able to roughly double the FlexTable frame rate for my stress test project after several small tweaks and changes in the FlexTable-perf branch. I want to do a bit more testing but I hope to have a backwards-compatible release ready to go out later today.

bvaughn on Jun 19, 2016

I did a bit of profiling last night after all. From what I can see, there don’t appear to be any big wins. The slowness seems to be coming from all of the features / functionality FlexTable provides. As I strip out features, it gets faster. (For example, stripping out the extra <div> wrapper in each column that truncates text and prevents it from overflowing its flexbox parent speeds things up a bit- but that’s an important feature of the table.)

Not done looking. I think there are definitely a couple of things I could precompute that may speed things up a tiny bit. I’m not sure there are any obvious big wins though.

bvaughn on Jun 17, 2016

react-virtualized is a nights-and-weekends project for me so I can’t look into this right away. But I’ll try to make some time tonight after work to profile FlexTable a little to see where the slowness is coming from.

bvaughn on Jun 15, 2016

PS. If you’d like to compare the differences in performance for FlexTable yourself:

Load the page, click anywhere to start the test, and watch it log FPS info to the console. On my laptop using Chrome 51, v7.7.1 logs 36fps and v7.8 logs 51fps.

Similar test for a vanilla Grid:

For me on Chrome v7.7.1 has 47.5 fps and v7.8 has 50.6fps. Smaller improvement, but still an improvement.

bvaughn on Jun 19, 2016

Do you think it’s necessary for you to worry about display at your level? Could you leave that more to the end user?

Well I guess that depends. On the one hand, FlexTable and VirtualScroll exists solely for the convenience. If a user wants (or is willing to) take on the “display” logic he/she could just use Grid and- in some cases, like this- it would likely be faster.

That being said, I’m not afraid to delegate some of the display work if it could speed things up. Just need to weigh the pros (how much does it improve performance) and cons I guess (loss of convenience, major release required, etc)

bvaughn on Jun 17, 2016

Thanks for checking it out. I’ve forked it and I’m going to take a look as well although it’s going to take me a bit longer…

Do you think it’s necessary for you to worry about display at your level? Could you leave that more to the end user? Maybe a user of this would actually want overflow or no overflow or some kind of custom overflow like ellipsis. I wonder if leaving that up to the user and having them deal with the performance issues of that is reasonable.

davidfateh on Jun 17, 2016