Layout Paint and Composite: The Rendering Pipeline

After the render tree is built, the browser runs three stages: Layout (calculating element sizes and positions), Paint (filling pixels with colors/text/images), and Composite (combining painted layers and displaying them on screen).

Layout calculates geometry — width, height, x/y position — for every element. Changing properties that affect geometry (width, margin, padding, font-size, position) triggers layout for the element and potentially its entire subtree — the most expensive stage.

Paint fills pixels for each layer: backgrounds, borders, text, shadows. Changing color, background-color, visibility, or border-radius triggers repaint without relayout — cheaper than layout but still costly if a large area repaints.

The compositor combines layers using the GPU. CSS properties that only affect compositing — transform and opacity — can be animated without triggering layout or paint. The GPU handles them at 60fps with minimal CPU involvement.

csstriggers.com (now browser-side docs) documents which CSS properties trigger layout, paint, and/or composite for each browser engine. Use it to audit animation properties. Prefer transform/opacity for animated properties.

Layout thrashing occurs when JavaScript alternates between reading layout properties (offsetWidth) and writing style properties in a loop. Each write invalidates layout; each read forces a synchronous reflow. Batch all reads before all writes to avoid thrashing.

Only transform and opacity are handled entirely by the compositor when the element is on its own layer. Animating any other property — even left/top — triggers layout or paint on the main thread and can cause jank.

Browsers promote elements to their own GPU layer when they have will-change: transform, a CSS animation on transform/opacity, a fixed position with compositing neighbors, or a 3D transform. Each layer uses GPU memory — too many layers cause memory pressure.

A paint storm occurs when a large portion of the page repaints every frame. Profile in Chrome DevTools → Rendering → Paint flashing to identify repainting areas. Isolate frequently animated elements on their own layers to contain repaint area.

Record a performance profile in Chrome DevTools. The flame chart shows Layout, Update Layer Tree, Paint, and Composite events. Long layout or paint bars indicate bottlenecks. Aim for frame times under 16ms to maintain 60fps.

Animate with transform and opacity whenever possible. Use clip-path instead of width/height for reveal animations — clip-path is compositor-friendly in modern browsers. Avoid animating box-shadow; use opacity + a pseudo-element with pre-rendered shadow instead.

Which two CSS properties can be animated without triggering layout or paint?

The rendering pipeline — Layout, Paint, Composite — determines animation performance. Layout is most expensive, paint is moderate, and composite-only properties (transform, opacity) are GPU-handled. Understanding triggers enables building smooth 60fps animations without layout thrashing or paint storms.