Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] Scroll performance feels slower in Chrome compared to Firefox #7798

Closed
2 tasks done
cmdcolin opened this issue Feb 2, 2023 · 2 comments
Closed
2 tasks done
Labels
component: data grid This is the name of the generic UI component, not the React module!

Comments

@cmdcolin
Copy link

cmdcolin commented Feb 2, 2023

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example:

https://m5190q.csb.app/
https://codesandbox.io/s/elated-neco-m5190q?file=/demo.tsx

Steps:

  1. Visit the live demo in Chrome and Firefox, it's the free version of @mui/x-data-grid on CodeSandbox
  2. Scroll the grid up and down
  3. It's not a super dramatic effect, but Chrome has a jankier scroll

Note: might be a dupe of #569, can close this if it is known or foldable into another issuer, or just beyond the scope of this library

Current behavior 😯

It feels like Chrome stutters more during scroll but Firefox is quite smooth. It could be a deep browser behavior that MUI cannot really actionably fix, and in that case, can close.

Not sure if relevant but here are some performance profiler screenshots

Chrome: has opaque dispatchEvent, might not be the full stack though and has yellow and red dropped frames (the 16.7ms boxes)

Screenshot from 2023-02-02 01-08-25

Firefox, the JS stack (yellow) looks approx the same as Chrome, but the renderer (green) is ticking away 60fps(not that experienced with firefox profiler though)

Screenshot from 2023-02-02 01-30-20

Expected behavior 🤔

Approximately equal performance between Chrome and Firefox

Context 🔦

I am trying to display as much data in the grid at once, so approx 100 at a time, but the scrolling stutters a bit. It would be great to have smooth performance

Your environment 🌎

Running in CodeSandbox, sorry I am not sure how to run this

Browser versions

  • Chrome Version 108.0.5359.98
  • Firefox 108.0.2 (64-bit)
  • Also tried Chromium, Version 109.0.5414.119, similar to Chrome

Order ID 💳 (optional)

No response

@cmdcolin cmdcolin added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 2, 2023
@zannager zannager added the component: data grid This is the name of the generic UI component, not the React module! label Feb 2, 2023
@m4theushw m4theushw removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 3, 2023
@m4theushw
Copy link
Member

The CodeSandbox is using the development build of React, which is much slower compared to the production version. Do you see the same degraded performance in https://mui.com/x/react-data-grid/#commercial-version?

@cmdcolin
Copy link
Author

cmdcolin commented Feb 3, 2023

this is probably a factor, I don't see a big diff at the link and also in a prod build of the codesandbox downloaded locally. thanks for the tip, can probably close for now :)

@cmdcolin cmdcolin closed this as completed Feb 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

3 participants