search

atomiks / rate-my-life

Your life rated in 7 categories
https://atomiks.github.io/rate-my-life/
91 stars 13 forks source link

Toggling theme laggy #1

Open conradbkay opened 5 years ago

conradbkay commented 5 years ago

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

atomiks commented 5 years ago

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.

marcoacierno commented 5 years ago

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. It should be way faster than rendering everything again.

But you would lose IE11, but as it's a demo I don't think it's a big deal...

atomiks commented 5 years ago

Do you mean CSS variables? The app is written entirely using styled-components which re-renders the components when the theme gets toggled.