[DataGrid] Improve vertical scrolling performance

[cherniavskii]

The Sticky headers PR fixed a bunch of issues, improved horizontal scrolling UX, and reduced the gaps when dragging the scroll thumb.

However, the vertical scroll performance has regressed - see #10059 (comment)

We can improve the performance according to #10059 (comment):

I think it will be fairly easy to add a wrapping container for the cells and apply the style once. That in conjunction with the CSS contain: strict style should make it much more easy for the browser to layout stuff.

Search keywords:

[oliviertassinari]

@romgrk A quick progress report on my laptop, using this script to scroll

expand

class Scroller {
    static scroll({ element, distance = 50000, speed = 50, maxSpeed = 1000, acceleration = 0, callback, scrollFn }) {
        let scrollTop = 0;

        const intervalId = setInterval(() => {
            if (scrollFn) {
                scrollFn(scrollTop)
            } else {
                element.scrollTop = scrollTop;
            }

            scrollTop += speed;

            if (speed < maxSpeed) speed += acceleration;

            if (scrollTop > distance) {
                clearInterval(intervalId);
                callback && callback();
            }
        }, 5);
    }
}
Scroller.scroll({ element: document.querySelectorAll('.MuiDataGrid-virtualScroller')[1] })

Before https://deploy-preview-11650--material-ui-x.netlify.app/x/react-data-grid/#pro-plan

After #10059 (add position: sticky) https://deploy-preview-10059--material-ui-x.netlify.app/x/react-data-grid/#pro-plan

Today on HEAD https://next--material-ui-x.netlify.app/x/react-data-grid/#pro-plan

AG Grid https://www.ag-grid.com/example/, scrolling at the same speed and with the same number of column / column type

I confirm the regression is pretty much gone, nice job 👍.

---

As for future improvement opportunities, the ones I can see:

1. Being smarter with the overscan, it feels like this [DataGrid] Performance: Improve virtualization overscan logic #11344 would have the most impact.

2. The time we spend rendering Emotion styles. We might be able to save 50ms We should likely memo that: [data grid] Time spend rendering Emotion/Pigment CSS #12401

3. Adding a translate3d on each row seems to save 30ms of Painting time, while it costs 20ms of Layout time, saving 10ms. [data grid] position: absolute for rows to avoid repaint #12399 This is because it avoids all the rows to repaint:

Screen.Recording.2024-02-26.at.02.27.30.mov

I guess positioning each row position: absolute could have an even better impact, avoiding a Paint when a row is added or removed to the list but without the Layout overhead cost.