A 16.67 Millisecond Frame

Summary

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. Changing properties like top, left, width, height, or margin triggers reflow. Changing paint only properties background-color, box-shadow, border-radius triggers repaint but not reflow. Changing transform or opacity is usually handled by the GPU, skipping reflow and repaint. The Use Case (tested on Chrome) To demonstrate this, we will build a small demo with squares that can move and shuffle. First, the unoptimized version. It uses top and left, which cause reflows on every f...