Building Smooth Animations: Understanding FPS, Browser Rendering Process, and Performance Optimization Techniques

The article begins by defining frames per second (fps) and why 60 fps is the target for smooth animations, noting that modern browsers refresh at 60 Hz and lower fps results in visible jank.

From HTML/CSS to a Web Page

To create efficient animations, developers must understand how browsers turn HTML, CSS, and JavaScript into a rendered page. The browser parses the HTML to build a DOM tree, parses CSS to build a CSSOM tree, then combines them into a render tree that contains the actual styles for each visible node. For example, a rule like width: 50% or color: inherit requires the browser to compute the final style based on parent nodes.

After the render tree is built, the browser creates layers, paints each layer, and uploads the resulting bitmaps to the GPU for compositing.

What the Browser Does Each Frame

During every animation frame the browser may execute several steps:

JavaScript : runs scripts that can modify the DOM or CSSOM.

Recalculate Style : computes the final style for affected nodes.

Layout : determines the size and position of elements; any change to width, height, margin, etc., triggers this.

Update Layer Tree : updates the stacking order of layers.

Paint : rasterises visual effects (text, borders, shadows) into bitmaps.

Composite Layer : the GPU merges layers into the final frame displayed on screen.

Tools like Chrome DevTools can visualize these steps.

When Steps Can Be Skipped

If a change only affects non‑layout properties (e.g., color ), the Layout step can be omitted, resulting in a faster frame. Conversely, changes to size‑affecting properties require full Layout → Paint → Composite.

Patterns

Layout : triggered by modifications to dimensions, position, or layout‑affecting CSS.

Paint : triggered by color‑related changes.

Composite : properties like opacity , transform , and filter can be handled entirely on the GPU without repaint.

References

Paul Irish’s "What forces layout/reflow" gist and csstriggers.com list the CSS properties that cause layout or paint.

Animation Techniques and Considerations

The article then presents five practical optimization points:

Avoid unnecessary reflows by separating reads and writes, using requestAnimationFrame for writes, and caching values before mutating the DOM.

Avoid unnecessary repaints by promoting frequently animated elements to their own layer with transform: translateZ(0) and hiding off‑screen elements with display:none or visibility:hidden .

Leverage GPU acceleration by animating only transform , opacity , or filter , which the GPU can handle without rasterising the whole page.

Build smoother animations by using transform and scale instead of changing top / left / width / height , and by calculating start/end positions with getBoundingClientRect .

Handle scroll and high‑frequency events with debounce or throttle , or drive them with requestAnimationFrame to keep the main thread responsive.

Examples include separating read/write loops, using transform: translateZ(0) to create independent layers, and animating opacity instead of background‑color changes.

Conclusion

The two‑part series first described the browser rendering pipeline and then, based on that knowledge, offered concrete tips for achieving 60 fps animations, emphasizing that developers should use profiling tools to identify real bottlenecks rather than relying on static rules.