Liquid error: internal
JavaScript can cause jank when we have long running scripts on the main thread. We theoretically have about 16 ms to process an event, but in reality the browser needs some of that time, so we only have about 10 ms.15:29 PM - 17 Dec 2019
Styles & animations also cause jank. The render pipeline is more expensive the further upstream you affect something:
JS > Calculate > Layout > Paint > Composite
opacity & transform affect Composite, so they are cheap to use vs width which affects Layout csstriggers.com15:29 PM - 17 Dec 2019
15:29 PM - 17 Dec 2019
This article was originally published on sia.codes. Head over there if you like this post and want to read others like it, or sign up for my newsletter to be notified of new posts!
Top comments (1)
I got some good questions on Twitter, so here's more info:
Q: Oh I like this! Do you have a favorite tool that displays the FPS on a component/page level?
A:
The performance tab in Chrome Dev Tools is a great tool. The frames section shows you frames and if you hover on the green area, the net fps. Then you can look in the other sections to see what might be happening. The main thread section shows you long running JS.
The red triangles help highlight problematic areas - see video below where I tried to show all this. I can upload to youtube if twitter doesn't save with good enough quality. (see video in tweet below)