tldr; go to the DEMO
Framework or vanilla JS, the browser plays by its own rules. Understanding them can be the difference between a janky mess and a smooth experience.
A Frame in 16.67 Milliseconds
JavaScript runs on a single thread and must yield control to the browser to get anything drawn.
Here is what happens during one frame:
Scripting - The JavaScript engine runs your code. Style Calculation - The browser figures out which CSS rules apply and computes the final styles, resolving cascades, inheritance, and computed values. Reflow (also called layout) – Calculates geometry such as width, height, and position. A reflow can ripple through parent and child elements, making it costly. Repaint (also called paint) – Draws pixels for backgrounds, borders, text, and shadows. Complex visuals like gradients or shadows slow this step. Composite – Takes painted layers and draws them to the screen. This step is much cheaper than reflow or repaint.
Frame budget math: There are 1000 milliseconds in one second. Dividing by 60 frames per second gives 1000/60 = 16.67 milliseconds per frame. If the above steps take longer than this to execute, the browser will drop frames resulting in ‘jank’.
What matters in practice
Modern browsers handle simple pages easily, but once you add animations or many elements, performance limits appear. Knowing which properties trigger which steps can help you keep things fast.
Scripting time is the time your JavaScript holds the main thread. Heavy work delays reflow and repaint.
... continue reading