[DataGrid] Use binary search to find column indexes in virtualization

[Janpot]

Noticed when playing around with the virtualization demo in codesandbox that when I tried 100,000 columns, it would hit codesandbox infinite loop detection. Having worked on my own toy implementation of a virtualized Material UI datagrid, I realized it was looping through all possible columns to find viewport intersection. Since it has to search an ordered array, a binary search is possible here and drastically reduces iterations on high column counts. I reviewed the Material UI Datagrid implementation and found that my implementation was easy to port. Quick measurement of performance showed about a 200x performance improvement of the getColumnFromScroll function execution time on 100,000 columns (~10ms => ~0.05ms).
I realize ofcourse that wanting to render 100k columns is very much an edge-case, so feel free to discard this PR if the added complexity isn't worth it. On 1000 columns, like in the current example, the performance improvement is much less dramatic.

[oliviertassinari]

I realize ofcourse that wanting to render 100k columns is very much an edge-case

Can the same optimization be applied to the row virtualization? This would make it a more appealing. My guess is yes as soon as we support variable row height.

Regarding the complexity of a dichotomy. With an abstraction that we could use in more places, I think that it could potentially do it.

[Janpot]

Can the same optimization be applied to the row virtualization?

Absolutely, the algorithm is agnostic in terms of direction. I've extracted a getIdxFromScroll that can be reused in other virtualization scenarios of variable sized items.

[oliviertassinari]

@Janpot It looks great 👌.

It's impressive to see what you have built on https://mui-plus.vercel.app/components/DataGrid/pinned in 3 months!

• useResizeObserver is one I have advocated adding in Add ResizeObserver abstraction material-ui#22519. (there are other utils that you could have imported from @material-ui/utils).

• The virtualization is interesting. For curiosity, I have tried to create a comparator (we always looking for ways to make it fast, it's really hard).

  • MUI+ https://codesandbox.io/s/recursing-jackson-4xgsl, deployed to production: https://csb-4xgsl.netlify.app/. The average frame rate when I scroll vertically, about 36 FPS
  
  • XGrid https://codesandbox.io/s/awesome-shtern-6pyxl, deployed to production: https://csb-6pyxl.netlify.app/. The average frame rate when I scroll vertically, about 25 FPS
  
  • AG Grid https://codesandbox.io/s/hopeful-ride-4wb7n?file=/src/App.tsx, deployed to production: https://csb-4wb7n.netlify.app/. The average frame rate when I scroll vertically, about 28 FPS
  

MUI+ performs about +44% better than XGrid (36 FPS vs. 25 FPS) and doesn't suffer from blocking screens every time the window jumps (the red bars). It's kicking ass! And it's not even using the CSS class name delegation strategy (move the style of the cells to a parent, avoid emotion creation for each cell).

@dtassone Could you have a closer look at the implementation of the virtualization? Maybe we can replace our implementation with this one?

Also cc @DanailH as you have been working on how to benchmark more systematically (so we can compare different implementations, PRs, etc.).

[Janpot]

Oh that's interesting, I hadn't done any real benchmarking yet. I'm glad it's useful. Happy to answer any questions. I converted the styles as per your suggestion, thanks!