-
Notifications
You must be signed in to change notification settings - Fork 13
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
Toggling theme laggy #1
Comments
I noticed it's laggy in dev mode, but in production mode it's quick. React has to re-render everything (incl. the 40 list items), and the browser has to repaint + transition everything. Using Performance DevTools it shows that React takes up 2/3 of the frame while 1/3 is spent on "Recalculate Style" (browser). On my computer it takes around 90 ms to toggle the theme in production mode, which is just within the 100 ms budget for a UI interaction. But on slow hardware like a phone it takes 400 ms which is unacceptable. Dev mode doesn't really matter I guess. If you toggle the theme on the Blueprint docs with 6x CPU slowdown it takes about 180ms for me, which is fairly acceptable. However, on my site (in production mode) it takes 600ms! I'm guessing it just has to do with the sheer amount of components that need to be re-rendered. If we can solve that then the performance issue should be gone. |
Do you think it might be worth to look into CSS properties for the theme change? We can just change a class to the body and then make the browser change everything else. But you would lose IE11, but as it's a demo I don't think it's a big deal... |
Do you mean CSS variables? The app is written entirely using |
I have experimented with the code but I can't seem to make the toggling of the theme to take less than 500ms, I don't see any delays anywhere
The text was updated successfully, but these errors were encountered: