[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 https://github.com/mui/mui-x/pull/10059#issuecomment-1904389411

We can improve the performance according to https://github.com/mui/mui-x/pull/10059#issuecomment-1904425888:

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:

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem, please open a new issue and provide details about your specific problem. If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

[oliviertassinari]

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

expand

```jsx 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 https://github.com/mui/mui-x/pull/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 #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: #12401

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

https://github.com/mui/mui-x/assets/3165635/f3ac867e-7130-4c08-878f-f24880997d60

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.