#learn
Did you know that every time you change an element's height the maximum rendering cycle will be necessary?
If your user has a display of 120 FPS you pretty much have a 4ms window to complete the rendering cycle (per frame), if your app fails to do that you’ll inevitably see unsmooth motion and jitter = poor user experience.
Things like that we typically start thinking about when we add complexity to our apps with a lot of changing elements in our DOM.
A great article on this
12 min
If you can take 1 practical learning from this, I’d say try to utilise transform, opacity and filter properties as much as you can instead of e.g. height/width or position. I’ve personally caught myself relying on position properties too much whereas using transform with translate can be less obvious, but so much better for performance.
Next time you want to increase height/width try using scale and when using eg left consider translate
