Engrain by ByteRush

WEB.01.03 Mid-level· 11 minCore — asked often

Style, layout, paint and composite: how a frame is made

The stages after the DOM and CSSOM: style calculation, layout, paint, raster and compositing on the GPU, and which CSS property changes rerun which stages, so animations stay smooth.

Comes up in: Web fundamentals, Recruiter screen, Frontend system design

Learn#

Sneha animates a side menu by changing left from -300px to 0. On her laptop it is smooth; on a ₹8,000 phone it stutters. Switching to transform: translateX() fixes it. Why?

After parsing, every frame can run up to five stages. Style calculation matches CSS rules to elements.

Layout, also called reflow, computes every box’s size and position.

Paint, also called repaint, records drawing commands for each layer, a part of the page drawn separately.

Raster turns those commands into pixels.

Compositing stacks the layers into the final frame on the GPU, on the compositor thread rather than the main thread.

Each change starts the pipeline at a different stage. Changing left moves the box, so layout runs again for it and possibly its neighbours, then paint, then composite. Changing transform or opacity on a layer only changes how the compositor draws that layer, so layout and paint are skipped, and the animation keeps going even while JavaScript is busy.

The stages of a frameStep 1 of 5

State

  • card: width 50%, color #333, transform none

Style: match CSS rules to every element and compute final values, such as width: 50% → a rule to apply.

Read the steps as text
  1. Style: match CSS rules to every element and compute final values, such as width: 50% → a rule to apply.
  2. Layout: work out each box's position and size in pixels.
  3. Paint: record drawing commands (fill this rectangle, draw this text) into display lists, per layer.
  4. Raster turns the commands into pixels in tiles; the compositor, on its own thread with the GPU, stacks the layers into the frame.
  5. Animating transform changes only how the compositor places a layer. Style may rerun, but layout and paint are skipped.

Predict#

Predict first

You change an element's background-color. Which stages run?

Interview angle#

Say it like this — about 30 seconds

“After the DOM and CSSOM, the browser calculates styles, does layout to get every box’s geometry, paints drawing commands into layers, rasterizes them into pixels, and composites the layers on the GPU. Reflow is layout; repaint is paint. Geometry properties such as width, top or font-size trigger layout, paint and composite. Colors and shadows trigger paint and composite. transform and opacity on their own layer only need compositing, which runs off the main thread, so those animations stay smooth.”

Stays on your device. Nothing is uploaded.
Follow-up What is the difference between reflow and repaint?
Reflow (layout) recomputes geometry; repaint redraws pixels. Reflow is usually followed by repaint; repaint can happen alone.
Follow-up Why are transform and opacity animations cheap?
They change how a finished layer is drawn, so the compositor can do it on the GPU without layout or paint, even if the main thread is busy.
Follow-up Should you add will-change: transform to everything?
No. Each layer costs GPU memory. Use it on elements you are about to animate, and remove it after.

Practice#

Guided

Encode which stage each CSS property change starts from, then pick the composite-only ones.

Done when

  • Geometry properties return “layout”; visual-only ones return “paint”.
  • transform and opacity return “composite”.
  • cheapest keeps only the composite-only properties, in order.
Your solution
Ctrl/⌘ + Enter

Remember#

Try to answer each card before you open it. Then add them to your reviews.

Name the stages after DOM and CSSOM.

Style, layout, paint, raster, composite.

Which stages does changing width rerun?

Layout, paint and composite.

Which two properties can usually animate on the compositor alone?

transform and opacity.

Reflow vs repaint?

Reflow recomputes geometry (layout); repaint redraws pixels (paint).

Go deeper

Four layers. Stop at the one your interview needs; each ends with a quick check.

The core ideaEvery round

Layout: anything that changes size or position, including text and font changes. Paint: visual-only changes such as color, background and shadow. Composite-only: transform and opacity on an element with its own layer.

Check yourself: Does changing color cause layout?

No, only paint and composite.

How it works underneathSenior rounds

Chromium runs style, layout and paint on the main thread, and raster and compositing on other threads. A compositor-only animation keeps running even during long JavaScript tasks .

Check yourself: Why can a transform animation continue while JavaScript blocks the main thread?

The compositor thread runs it without needing the main thread.

Edge cases and trapsWhere people slip

Layers are created for will-change, 3D transforms, video and canvas, and for elements that overlap other layers. Too many layers, a “layer explosion”, eats memory. The DevTools Layers panel shows them.

Check yourself: What is layer explosion?

Too many composited layers, which uses lots of GPU memory and slows compositing.

In productionStaff-level answers

Turn on Paint flashing in the Rendering panel to see what repaints, and record in the Performance panel to see layout costs . These stages connect to INP and smooth scrolling (QLT.01.01).

Check yourself: Which DevTools option highlights repainted areas?

Paint flashing, in the Rendering panel.

Finished the five steps? Mark it, and its cards join your reviews.

Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

Interview questions this answers

  • What is the difference between reflow and repaint? Which CSS properties avoid both?
  • What is compositing and why are transform and opacity animations cheap?